jquery - jquery.validate 非活动标签的验证

Question

我有一个表单，它使用基于 jQuery UI 的选项卡来组织不同的字段。我正在使用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
}