带有 jQuery 验证插件的下一个按钮上的 invalidHandler答案

【问题标题】：invalidHandler on next button with jQuery validation plugin带有 jQuery 验证插件的下一个按钮上的 invalidHandler
【发布时间】：2012-03-23 13:23:26
【问题描述】：

我正在使用 jQuery 验证插件设置表单，并且我的表单将包含几个步骤，因此我将在每一步以及单击 NEXT 按钮时验证表单。

问题是默认的“invalidHandler”仅适用于提交，但如果单击自定义事件或任何其他按钮但提交（在我的情况下为 NEXT 按钮）如何调用它？

这是我的快速代码示例：

$(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 按钮的表单：

<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>

谢谢。

【问题讨论】：

标签： javascript jquery jquery-validate

【解决方案1】：

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

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

More information on valid()

【讨论】：