Плагин проверки jQuery, не отображающий пользовательские сообщения

Пытался создать регистрационную форму, аналогичную documentation example, но не может заставить ее работать. В Chrome Inspector говорится: «jquery.validate.js: 640 Uncaught TypeError: не может прочитать свойство« вызов »неопределенного», но я не могу понять этот код.Плагин проверки jQuery, не отображающий пользовательские сообщения

На самом деле поле электронной почты вид работ ... enter image description here

Вот HTML:

<html> 

    <head> 
     <meta charset="utf-8"> 
     <title>Register</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="css/quickipedia.css"> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/jquery.validate.js"></script> 
     <script src="js/register.js"></script> 

    </head> 

    <body class="q-site-background"> 

     <div id="q-banner"></div>  

      <div id="q-login"> 

       <form class="form-horizontal" id="registrationForm" role="form" action="register.php" method="post"> 
        <div class="row"> 
         <div class="col-span-4 col-md-offset-4"> 
          <h2 class="form-horizontal-heading">Register</h2> 
         </div> 
        </div> 
        <br/> 

        <div class="form-group">  
         <label for="username" class="control-label col-sm-4">Username: </label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" id="username" name="username" placeholder="Username" autofocus > 
         </div> 
        </div> 

        <div class="form-group">  
         <label for="password" class="control-label col-sm-4">Password: </label> 
         <div class="col-sm-8"> 
          <input type="password" class="form-control" id="password" name="password" placeholder="Password" > 
         </div> 
        </div> 

        <div class="form-group">  
         <label for="confirm_password" class="control-label col-sm-4">Confirm Password: </label> 
         <div class="col-sm-8"> 
          <input type="password" class="form-control" id="confirm_password" name="confirmPassword" placeholder="Confirm Password" > 
         </div> 
        </div> 

        <div class="form-group">  
         <label for="email" class="control-label col-sm-4">Email: </label> 
         <div class="col-sm-8"> 
          <input type="email" class="form-control" id="email" name="email" placeholder="Email"> 
         </div> 
        </div> 

        <div class="form-group">  
         <label for="confirm_email" class="control-label col-sm-4">Confirm Email: </label> 
         <div class="col-sm-8"> 
          <input type="email" class="form-control" id="confirm_email" name="confirmEmail" placeholder="Confirm Email" > 
         </div> 
        </div> 

        <button id="#register" class="btn btn-lg btn-primary btn-block q-button col-span-4" type="submit">Create Account</button> 

       </form> 

       <br/> 

     </div> 

    </body> 

</html>

И register.js:

$(document).ready(function() { 

    $("#registrationForm").validate({ 
     rules:{ 
      username:{ 
       required:true, 
       minLength:4 
      }, 
      password:{ 
       minLength:6, 
       required:true 
      }, 
      confirm_password:{ 
       minLength:6, 
       required:true, 
       equalTo:"#password" 
      }, 
      email:{ 
       required:true, 
       email:true 
      }, 
      confirm_email:{ 
       required:true, 
       email:true, 
       equalTo:"#email" 
      } 
     }, 
     messages:{ 
      username:{ 
       required:"Please enter a username", 
       minLength:"Username must be at least 4 characters long" 
      }, 
      password:{ 
       required:"Please enter a password", 
       minLength:"Password must be at least 6 characters" 
      }, 
      confirm_password:{ 
       required:"Please confirm password", 
       minLength:"Password must be at least 6 characters", 
       equalTo:"Passwords do not match" 
      }, 
      email:"Please enter an email", 
      confirm_email:{ 
       required:"Please confirm email", 
       equalTo:"Emails do not match" 
      } 
     } 
    }); 
});

Я проверил по синтаксису миллиард раз и не может найти никаких ошибок. Кроме того, он работает, если я включаю атрибуты ввода HTML (например, требуемый minLength = "6" equalTo = "# password"), но это просто показывает стандартные сообщения. Я хочу использовать настроенные, созданные мной, но ничего не появляется.

источник

2015-03-05 user1985189

Пожалуйста, никогда не исправляйте свой код в вопросе ... он делает ответы бесполезными. Не стесняйтесь добавлять новую информацию. Благодарю. – Sparky

I've checked over the syntax a billion times and can't find any errors.

Нет такого правила, которое называется minLength. Это источник вашей «неопределенной» ошибки.

It's minlength. (обратите внимание на точное написание)

$("#registrationForm").validate({ 
    rules: { 
     username: { 
      required: true, 
      minlength: 4 
     }, 
     ....

Вы также будете иметь проблемы здесь ...

confirm_email: { // <- THIS IS SUPPOSED TO BE THE NAME ATTRIBUTE 
    required:true, 
    email:true, 
    equalTo:"#email" 
}

Правила в рамках опции rules определяются атрибутом месторождения name, не от их id.

источник

2015-03-05 20:58:05 Sparky

ах ок я понял, что это будет какой-то глупый надзор, как это с моей стороны. Вы, сэр, спасатель! – user1985189

@ пользователь1985189, добро пожаловать. – Sparky

Плагин проверки jQuery, не отображающий пользовательские сообщения

ответ

Смежные вопросы