jQuery验证无法正常工作

Question

单击div按钮时,我需要激活此验证.如果验证成功,我希望它提醒"好".

不幸的是,虽然检查了验证火灾和所有规则,但如果必填字段为空,则不会出错.任何其他检查都会出错.

最后,如果我正确填写字段并单击按钮,则没有任何反应.

JS:

$(document).ready(function() {

// Submit prompted password reset
$("#passwordResetButton").click(function() {

    $("#passwordResetForm").validate({  
        rules: {
            password: { required: true, minlength: 8, maxlength: 40, remote: { url: "/ajax/isPasswordOK", data: { product: function() { return $("#password").val();  } } } },
            confirmPassword: { required: true, equalTo: "#password" },
        }, 
        messages: { 
            password: { required: "Please enter a password", minlength: "Password must be at least 8 characters long", remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$" },
            confirmPassword: { required: "Please confirm your password", equalTo: "The passwords do not match" },
          }, 
        onkeyup: false, //turn off auto validate whilst typing
        onblur: true,
        afterValidation: function() {
            alert('is good');
        }
    });
});
});

HTML:

<form id="passwordResetForm" style="width: 480px; margin: auto;">
        <div class="row"><p class="lead">Let's reset that password</p></div>
        <div class="row">
            <div class="small-8 large-4 columns"><label>New Password:</label></div>
            <div class="small-12 large-6 columns"><input name="password" id="password" type="password" size="20"/></div>
        </div>
        <div class="row">
            <div class="small-8 large-4 columns"><label>Confirm Password:</label></div>
            <div class="small-12 large-6 columns"><input name="confirmPassword" id="confirmPassword" type="password" size="20"/></div>
        </div>
        <div class="row">
            <div class="large-offset-10 small-3 large-1 columns">
                <div id="passwordResetButton"  class="small button">Submit</div>
            </div>
        </div>
    </form>

Answer 1

您的代码存在一些问题.

1) .validate()是插件的初始化方法,而不是测试表单的方法.换句话说,不要将它放在click处理程序中,否则在需要时它就不会准备就绪.放入.validate()DOM ready事件处理程序,以便在创建页面时触发一次,然后表单立即可以进行验证.

2)onblur这个插件没有这样的选项.它被调用onfocusout,默认情况下该选项已被激活. 将此类型的选项设置true为无效并且可能会破坏某些内容,因此只需将其完全保留在初始化之外.

3)没有这样的选项/功能被调用afterValidation:.你不能只是"发明"回调函数...... jQuery插件必须已经专门构建了这些东西.如果要在有效表单上触发某些内容,请使用提供的submitHandler:回调函数.

submitHandler: function (form) {
    alert('is good');
    return false;
}

4)使用a <input type="submit" />或a <button type="submit">Submit</button>表格提交.这样,插件可以自动捕获click事件并按设计处理提交.

5)次要注意:对于您的自定义消息,只需使用{0},将自动插入规则的参数.这种代码更容易维护.

minlength: "Password must be at least {0} characters long",

工作演示:http: //jsfiddle.net/J9N3g/

我建议您查看完整的文档:http: //docs.jquery.com/Plugins/Validation

jQuery:

$(document).ready(function () {

    $("#passwordResetForm").validate({
        rules: {
            password: {
                required: true,
                minlength: 8,
                maxlength: 40,
                remote: {
                    url: "/ajax/isPasswordOK",
                    data: {
                        product: function () {
                            return $("#password").val();
                        }
                    }
                }
            },
            confirmPassword: {
                required: true,
                equalTo: "#password"
            },
        },
        messages: {
            password: {
                required: "Please enter a password",
                minlength: "Password must be at least {0} characters long",
                remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$"
            },
            confirmPassword: {
                required: "Please confirm your password",
                equalTo: "The passwords do not match"
            },
        },
        onkeyup: false, //turn off auto validate whilst typing
        submitHandler: function (form) {
            alert('is good');
            return false;
        }
    });

});

HTML:

<form id="passwordResetForm" style="width: 480px; margin: auto;">
    <div class="row">
        <p class="lead">Let's reset that password</p>
    </div>
    <div class="row">
        <div class="small-8 large-4 columns">
            <label>New Password:</label>
        </div>
        <div class="small-12 large-6 columns">
            <input name="password" id="password" type="password" size="20" />
        </div>
    </div>
    <div class="row">
        <div class="small-8 large-4 columns">
            <label>Confirm Password:</label>
        </div>
        <div class="small-12 large-6 columns">
            <input name="confirmPassword" id="confirmPassword" type="password" size="20" />
        </div>
    </div>
    <div class="row">
        <div class="large-offset-10 small-3 large-1 columns">
            <input type="submit" id="passwordResetButton" class="small button" />
        </div>
    </div>
</form>