jQuery Validate无法正常工作 [英] jQuery Validate is not working

问题描述

这是我第一次使用jQuery Validation，但遇到了问题.这是我表单的HTML:

It's my first time using jQuery Validation and I'm running into issues. This is my form's 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:

And my 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.我不确定为什么它不起作用. (我只是想正确地验证密码字段，因为我可以从中复制电子邮件输入的代码.)

I've copied the example code off the official website but modified the input field ID's. I am unsure why it is not working. (I'm only trying to get the password fields validation correctly, as I can replicate the code for the email inputs from that).

推荐答案

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

1) You're missing the name attributes from all of the relevant input elements. This is absolutely required in order for this plugin to operate properly.

文档:

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

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

尽管未作说明，但name属性也必须是唯一的，因为这是插件跟踪所有已验证表单元素的方式.

Although not stated, the name attributes must also be unique as this is how the plugin keeps track of all validated form elements.

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

2) Absolutely, do NOT wrap your call to .validate() within a submit or click handler. Simply call it on document ready.

$(document).ready(function(){

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

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

The .validate() method is only used to initialize the plugin and the click event of the submit is captured and intercepted automatically.

工作示例: http://jsfiddle.net/L7q7oapc/

Working DEMO: http://jsfiddle.net/L7q7oapc/

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

Notice that you do not need to duplicate the same rules on the second password field. Since it must always match the first, these are superfluous.

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

---

请参考 SO Tag Wiki页面上的示例代码和提示.

---

Please refer to the sample code and tips on the SO Tag Wiki page.

这篇关于jQuery Validate无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！