使用jQuery验证插件的下一个按钮上的invalidHandler [英] invalidHandler on next button with jQuery validation plugin

问题描述

我正在使用jQuery验证插件设置表单，我的表单将包含几个步骤，因此我需要在每一步上以及单击NEXT按钮时对表单进行验证.

I am setting up a form with jQuery validation plugin and my form will have a few steps so I am validating the form on each step and on the click of the NEXT button.

问题在于，默认的" invalidHandler "仅适用于提交，但是如果单击自定义事件或其他任何按钮却提交(如果是提交，我将单击下一个"按钮)怎么调用?

The problem is that default "invalidHandler" works only on submit but how to call it if clicked on custom event or any other button but submit (in my case the NEXT button)?

这是我的快速代码示例:

Here is my quick code example:

$(function() {
                $("form").validate({
                    invalidHandler : function(form, validator) {

                        var errors = validator.numberOfInvalids();

                        if(errors) {
                            alert(errors);
                            validator.errorList[0].element.focus();
                        }

                    },
                    rules : {
                        name : 'required'
                    }
                });

                $('#next').click(function() {

                    var element = $('form');
                    var stepIsValid = true;
                    $("input.text").each(function(index) {
                        stepIsValid = element.validate().element($(this)) && stepIsValid;
                    });
                    if(!stepIsValid) {
                        return false;
                    }

                });
            });

以及带有NEXT按钮的表单:

and the form with NEXT button:

<form>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" class="text" />
            <input type="button" value="Next" id="next" />
            <input type="submit" />
        </form>

谢谢.

推荐答案

使用.valid()手动检查表单的状态:

Use .valid() to manually check the status of a form:

$('#next').click(function() {
    var element = $('form');
    if (!element.valid()) {
        return false;
    }
});

有关有效()的更多信息

这篇关于使用jQuery验证插件的下一个按钮上的invalidHandler的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！