jQuery 验证表似乎有效

Question

我是 jQuery 的新手，我尝试从 jQuery 创建一个验证表单，但它似乎不起作用。 jQuery 表格对我来说很正常，我的表格中有 bootstrap。我把它放在 JSFiddle 中，当我点击提交时它给了我一个错误。 :P

<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 提供，您可以通过左侧的 "External Resources" 面板将其添加到您的 jsfiddle。

jQuery 验证表似乎有效

jQuery Validation Form does seem to be working

forms

jquery

jquery-validate