Question

我有一个使用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并继续。有更好的解决方法吗？

Answer 1

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

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

Answer 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: {
            ...
        }
    });

Answer 3

试试吧，

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

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

jquery.validate验证非活动选项卡

4 个答案: