jQuery 验证无效

Question

这是我第一次使用 jQuery 验证，我遇到了运行问题。这是我的表格 HTML:

<form id="signup" novalidate="novalidate">
            <div class="form-group">
              <label class="sr-only" for="emailAddress">Email address</label>
              <input type="email" class="form-control" id="emailAddress" placeholder="Enter email" data-required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="emailAddressConfirm">Confirm Email address</label>
              <input type="email" class="form-control" id="emailAddressConfirm" placeholder="Confirm email" data-required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="password">Password</label>
              <input type="password" class="form-control" id="password" placeholder="Password" data-required>
            </div>
            <div class="form-group">
              <label class="sr-only" for="passwordConfirm">Confirm Password</label>
              <input type="password" class="form-control" id="passwordConfirm" placeholder="Confirm Password" data-required>
            </div>
            <button type="submit" class="btn btn-primary">Sign up</button>
          </form>

还有我的JavaScript：

$("form#signup").on("submit", function(){
    $("form#signup").validate({
        rules: {
            password: {
                required: true,
                minlength: 5
            },
            passwordConfirm: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            }
        },
        messages: {
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            passwordConfirm: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            }
        }
    });
});

我已经从官方网站复制了示例代码，但修改了输入字段 ID。我不确定为什么它不起作用。（我只是想正确验证密码字段，因为我可以从中复制电子邮件输入的代码）。

Answer 1

1) 您缺少所有相关 input 元素的 name 属性。为了使此插件正常运行，这是绝对必需的。

Documentation:

The name attribute is "required" for input elements, the validation plugin doesn't work without it.

虽然没有说明，但 name 属性也必须是唯一的，因为这是插件跟踪所有经过验证的表单元素的方式。

2) 绝对不要将对 .validate() 的调用包装在 submit 或 click 处理程序中。只需在文档准备就绪时调用它即可。

$(document).ready(function(){

    $("form#signup").validate({ // initialize plugin on your form
        ....

.validate()方法仅用于初始化插件，提交的click事件被自动捕获和拦截。

工作演示：http://jsfiddle.net/L7q7oapc/

请注意，您不需要在第二个密码字段上重复相同的规则。因为它必须总是匹配第一个，所以这些都是多余的。

$("form#signup").validate({
    rules: {
        password: {
            required: true,
            minlength: 5
        },
        passwordConfirm: {
            equalTo: "password" // 'name' of other field
        }
    }

请参考the SO Tag Wiki page上的示例代码和提示。

jQuery 验证无效

jQuery Validate is not working

forms

jquery

jquery-validate