jQuery验证无法正常工作 [英] jQuery validate not working properly

问题描述

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

I need this validation to fire when the div button is clicked. If the validation is successful, I want it to alert "is good".

不幸的是，尽管会触发验证并检查所有规则，但是如果必填字段为空，则不会出错.其他检查都将出错.

Unfortunately, although validation fires and all rules are checked, it does not error if a required field is blank. It will error for any of the other checks tho.

最后，如果我正确填写字段并单击按钮，则什么也没有发生.

Finally, if I fill in the fields correctly and click the button, nothing happens.

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>

推荐答案

您的代码存在一些问题.

There are a few problems with your code.

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

1) .validate() is the initialization method of the plugin, not a method for testing the form. In other words, do not put it inside of a click handler or it won't be ready when you need it. Put .validate() inside of the DOM ready event handler so it's fired once when the page is created, then the form is immediately ready for validation.

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

2) There is no such option as onblur for this plugin. It is called onfocusout and the option is already activated by default. Setting this type of option to true is not valid and will likely break something, so simply leave it out of the initialization entirely.

3 )没有称为afterValidation:的选项/功能.您不能只是发明"回调函数... jQuery插件必须具有以下内容:已专门构建进入他们.如果要在有效表单上触发内容，请使用提供的submitHandler:回调函数.

3) There is no such option/function called afterValidation:. You cannot just "invent" callback functions... jQuery plugins have to have these things already specifically built into them. If you want to fire something on a valid form, use the supplied submitHandler: callback function.

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

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

4) Use a <input type="submit" /> or a <button type="submit">Submit</button> for the form's submit. This way, the plugin can automatically capture the click event and handle the submit as designed.

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

5) Minor note: For your custom messages, simply use {0} and the rule's parameter will be inserted automatically. This kind of code is easier to maintain.

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

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

Working Demo: http://jsfiddle.net/J9N3g/

我建议您在此处查看完整的文档: http://docs.jquery.com/Plugins/验证

I suggest that you review the full documentation here: 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>

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