jQuery Validation，提交时显示有效/无效表单选项卡

我有一个带有Tabs的表单，并且有一个简单的函数用于在用户在它们之间移动时验证表单选项卡。（使用jQuery，引导和jquery.validate）jQuery Validation，提交时显示有效/无效表单选项卡

标签验证功能

var validateTab = function(element) { 

    var _element = $(element); 
    var validatePane = _element.attr('data-target'); 
    var isValid = $(validatePane + ' :input').valid(); 
    var _li = _element.parent(); 

    // console.log(validatePane + " - " + isValid); 

    if (isValid) { 
     _li.removeClass('alert-danger'); 
     _li.addClass('alert-success'); 
    } else { 
     _li.removeClass('alert-success'); 
     _li.addClass('alert-danger'); 
    } 
}; // end function validateTab

我正在听引导 'hidden.bs.tab' 事件，并调用该函数。

// Validate Tab on tab switch. 
$(document).on('hidden.bs.tab', 'a[data-toggle="tab"]', function(e) { 
    validateTab(e.currentTarget); 
});

预期上述作品，但我想的形式也提交时要做到这一点。我添加了一个简单的循环来获取每个选项卡，并打电话的jQuery validateTab（）在invalidHandler（）验证

invalidHandler: function(event, validator) { 
    console.log('invalid form'); 
    $('#myForm').append(
    '<div class="alert alert-danger alert-dismissable">' + 
    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">' + 
    '&times;' + 
    '</button>' + 
    '<strong>Error: </strong>' + 
    '<span>Please correct the problems and try again.</span>' + 
    '</div>' 
); 

    // ADDED THIS CODE AND STARTED RUNNING INTO PROBLEMS. 
    var $tabs = $('#myTab li a'); 
    $tabs.each(function(key, ele) { 
    // IF last Tab of form is Valid form submits regardless of other errors. 
    validateTab(ele); 
    }); 

}

这个作品有一个例外......当最后一个选项卡是有效的形式突然提出，即使有在其他选项卡上出现错误。它似乎调用有效覆盖任何以前的调用或在调用invalidHandler之前设置的任何内容。整个表格突然提交，就好像它已经被成功验证一样。

一个完整的例子可以在这里找到。 https://jsfiddle.net/qcean237/1/

当前没有对TAB 4进行验证，所以即使没有提供其他所需字段，每次都会提交表单。

我应该以不同的方式或在不同的地方验证选项卡来更新失败的提交上的选项卡外观？

感谢，弥敦道

来源

2017-04-10 Nathan

确切地说，它一直运行，直到在最后一个选项卡上调用valid（）。当最后一个标签验证整个表单被认为是有效的。在invalidHandler（）里面调用valid（）会觉得很肮脏，但是到目前为止我已经想到了。 – Nathan

*“在invalidHandler（）中调用'valid（）''感觉脏'*〜这就是你的根本问题。 – Sparky

的invalidHandler仅火灾时，形式是无效的，而当形式是有效的submitHandler仅火灾。也就是说，您的validateTab()函数也会通过调用.valid()来触发验证。换句话说，当invalidHandler已经知道这个表单是无效的时候，通过使invalidHandler检查有效性来打破这个插件......这是你失败的根源。 invalidHandler和submitHandler仅在确定后才被调用......不是同时发生，否则无法知道应该触发哪个处理程序。

不管怎么说，只需运行validateTab()当你点击按钮...

$('button').on('click', function() { var $tabs = $('#myTab li a'); $tabs.each(function(key, ele) { validateTab(ele); }); });

DEMO：https://jsfiddle.net/qcean237/2/

来源

2017-04-10 16:35:54 Sparky

谢谢！我完全错过了解决这个jquery.validate内部的问题。 – Nathan

你并不需要一个验证invalidHandler内的每个标签的代码。由于当您提交表单时，所有选项卡都已经在表单内部进行验证。

只需从invalidHandler

$tabs.each(function(key, ele) { 
    validateTab(ele); 
});

删除下列行这里是一个fiddle除去以上后，一切工作正常。

来源

2017-04-10 16:49:42

该OP特别声明，*“但我希望在提交表格时也这样做”* – Sparky

您的回答对我有意义..很好的解释。谢谢！！ –

jQuery Validation，提交时显示有效/无效表单选项卡

回答

相关问题