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＆＃39; s。我不确定为什么它不起作用。（我只是试图正确地验证密码字段，因为我可以从中复制电子邮件输入的代码）。

Answer 1

1）您错过了所有相关name元素的input属性。这是绝对必需的，以便此插件正常运行。

Documentation：

name属性对于输入元素是“必需的”，验证插件在没有的情况下无效。

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

2）当然，请勿在{{1}}或.validate()处理程序中将您的电话打包到submit。只需在准备好文件时调用它。

click

$(document).ready(function(){ $("form#signup").validate({ // initialize plugin on your form ....方法仅用于初始化插件，并且会自动捕获并拦截提交的.validate()事件。

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

请注意，您无需在第二个密码字段上复制相同的规则。由于必须始终与第一个匹配，因此这些是多余的。

click

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

jQuery验证不起作用

1 个答案: