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 就绪事件处理程序内部，因此在创建页面时会触发一次，然后表单立即准备好进行验证。

2) 没有 onblur 这样的选项对于这个插件。它被称为onfocusout并且该选项已默认激活。 Setting this type of option to true is not valid并且可能会破坏某些东西，因此只需将其完全排除在初始化之外即可。

3) 没有名为 afterValidation: 的选项/函数。你不能只是“发明”回调函数... jQuery 插件必须有这些东西 already specifically built into them 。如果您想在有效表单上触发某些内容，请使用提供的 submitHandler:回调函数。

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

4) 使用<input type="submit" />或<button type="submit">Submit</button>用于表单的提交。这样，插件就可以自动捕获点击事件并按设计处理提交。

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>