Форма проверки jQuery действительно работает

Question

Я очень новичок в jQuery, и я попытался создать форму проверки из jQuery, и она, похоже, не работает. Форма jQuery выглядит довольно нормально для меня, и в моей форме есть бутстрап. Я положил его в JSFiddle, и он дал мне ошибку, когда я нажму кнопку «Отправить». : P

http://jsfiddle.net/jimysb/3oLxfpz9/5/

<form action="" method="POST" class="form-horizontal" id="registerForm"> 
<div class="form-group"> 
    <label class="control-label col-sm-2" for="email">Username:</label> 
<div class="col-sm-10"> 
    <input type="username" class="form-control" name="username" placeholder="Enter username" id="username" required /> 
</div> 
</div> 
<div class="form-group"> 
    <label class="control-label col-sm-2" for="email">Email:</label> 
<div class="col-sm-10"> 
    <input type="email" class="form-control" name="email" placeholder="Enter email" id="email" required /> 
</div> 
</div> 
<div class="form-group"> 
    <label class="control-label col-sm-2" for="email">Password:</label> 
<div class="col-sm-10"> 
    <input type="password" class="form-control" name="password" placeholder="Enter password" id="password" required /> 
</div> 
</div> 
<div class="form-group"> 
    <label class="control-label col-sm-2" for="email">Confirm Password:</label> 
<div class="col-sm-10"> 
    <input type="password" class="form-control" name="confirmpassword" placeholder="Confirm Password" id="confirmpassword" required /> 
</div> 
</div>      
<div class="checkbox"> 
    <label><input type="checkbox" name="checkbox">Click it</label> 
</div> 
<div class="form-group"> 
<div class="col-sm-offset-2 col-sm-10"> 
    <button type="submit" class="btn btn-default" id="registersubmit">Submit</button> 
</div> 
</div> 

И мой JQuery код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

$('#registerForm').validate({ 
    rules: { 
     username: { 
      required: true, 
      minlength: 5, 
      maxlength: 20 
     }, 
     email: { 
      required: true, 
      minlength: 5, 
      maxlength: 255, 
      email: true 
     }, 
     password: { 
      required: true, 
      minlength: 5, 
      maxlength: 30 
     }, 
     confirmpassword: { 
      required: true, 
      equalTo: '#password' 
     } 
    }, 
    messages: { 
     username: { 
      required: 'You must enter a username', 
      minlength: 'Your username is too short', 
      maxlength: 'Your username is too long' 
     }, 
     email: { 
      required: 'You must enter a email', 
      minlength: 'Your email is too short', 
      email: 'Please enter a valid email address' 
     }, 
     password: { 
      required: 'You must enter a password', 
      minlength: 'Your password is too short', 
      maxlength: 'Your password is too long' 
     }, 
     confirmpassword: { 
      required: 'You must confirm your password', 
      equalTo: 'You password does not match' 
     } 
    } 
}); 

});

Answer 1

validate() метод приходит любезно this jQuery validation plugin, вы можете добавить его в свой jsfiddle через «Внешние ресурсы» панели слева.