Question

单击div按钮时，我需要触发此验证。如果验证成功，我希望它提醒“好”。

不幸的是，虽然验证了fires并检查了所有规则，但如果必填字段为空，则不会出错。任何其他检查都会出错。

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

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，默认情况下该选项已被激活。 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>表单提交。这样，插件可以自动捕获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>

Answer 2

更改为

afterValidation: function() {
            alert('is good');
        }

到

submitHandler: function() { alert("is good!") }:

请参阅jquery验证选项：http://docs.jquery.com/Plugins/Validation/validate

将div更改为按钮，这是最佳实践

<div id="passwordResetButton"  class="small button">Submit</div>

到

<button id="passwordResetButton"  class="small button">Submit</button>

jQuery验证无法正常工作

2 个答案: