jquery.validate 非活动标签的验证答案

【问题标题】：jquery.validate validation for non active tabsjquery.validate 非活动标签的验证
【发布时间】：2013-06-10 07:25:24
【问题描述】：

我有一个使用jQuery UI based tab 组织不同字段的表单。我正在使用jquery.validate.min.js 进行验证。例如，某些字段有 class= "required" 通知插件进行必填字段验证。最后，在提交表单之前，我会验证表单以确保所有输入都是正确的。一个简单的用法，比如 -

HTML

...
<input type="text" class = "required" ...

SCRIPT

...
$("#frmClaim").validate();//to initilize validation
...
$('#frmClaim').submit(function () {            
             if($(this).valid())
                { ... }
         });
...

我面临的问题是，如果我在选项卡 3 上并且选项卡 2 上有一个用户未填充的“必填”字段，则不会执行验证。验证仅针对可见的字段触发 - 即活动。这是可能的还是我错过了什么？

现在，在提交时，我手动激活每个选项卡，执行 .valid 并继续。有没有更好的解决方法？

【问题讨论】：

标签： jquery jquery-validate jquery-ui-tabs

【解决方案1】：

像这样初始化验证以验证您的隐藏字段

$("#frmClaim").validate( 
 { ignore: [] }
);

【讨论】：

很高兴让我完成了一半。但正如预期的那样，它没有将焦点设置到有错误的选项卡上，所以我相信我将不得不手动检查并设置它。更何况这将是高估了。
读取项目站点，这是由于隐藏元素从 1.9 开始默认被忽略。 github.com/jzaefferer/jquery-validation/issues/279

【解决方案2】：

我找到了适合我的解决方案。想法是迭代所有选项卡，在表单上调用 validate 并在发现无效选项卡时停止，如果没有无效字段则提交表单。

$("#my_form").validate({
        submitHandler: function (form, evt) {
            var f = $(form);
            var tab = $("#my_tab_id");
            var tabs_count = tab.children('ul').children('li').length;
            var active = tab.tabs('option', 'active');
            var invalid = false;
            var validated = 0;

            while (validated < tabs_count && !invalid) {
                if (!f.valid()) {
                    invalid = true;
                    break;
                }

                active++;
                active = active % tabs_count;
                tab.tabs('option', 'active', active);

                validated++;
            }

            if (!invalid)
                form.submit();
            else
                evt.preventDefault();
        },
        rules: {
            ...
        },
        messages: {
            ...
        }
    });

【讨论】：

【解决方案3】：

试试看，

var frmCl=$("#frmClaim").validate();//to initilize validation
...
$('#frmClaim').submit(function () { 
     if($(frmCl).valid())
         { ... }
});

【讨论】：

你确定这是你的意思吗？它不起作用。 frmCl 是对验证器的引用，调用 $(frmCl).valid() 只会抛出错误。

【解决方案4】：

试试这个：

function saveStuff() {

    $.validator.unobtrusive.parse('#FORMID');

    var data = {};

    var anyError = false;

    var _frm = $('#FORMID');

    var _validator = _frm.data('validator');
    _validator.settings.ignore = "";

    _frm.find('input, select, textarea').each(function () {
        if (!_validator.element(this)) {
            anyError = true;
        }
    });

    if (anyError) {
        return false;
    }

    //SAVE DATA CODE HERE
}

【讨论】：