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）您缺少name所有相关input元素的属性。为了使该插件正常运行，这是绝对必需的。

文件：

该name属性对于输入元素是“必需的”，没有它验证插件将无法工作。

虽然没有说明，但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
        }
    }

请参阅SO Tag Wiki 页面上的示例代码和提示。