3

我需要在单击 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>
4

2 回答 2

27

您的代码存在一些问题。

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

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>提交表单。这样，插件可以自动捕获点击事件并按设计处理提交。

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>
于 2013-04-14T14:53:31.423 回答
0

改成

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>
于 2013-04-14T02:33:05.010 回答