Question

我有一个带Tabs的表单，以及一个简单的函数，用于在用户在它们之间移动时验证表单选项卡。（使用jQuery，Bootstrap和jquery.validate）

标签验证功能

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

我现在正在听bootstrap＆＃39; hidden.bs.tab＆＃39;事件并调用函数。

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

上述工作符合预期，但我也希望在提交表单时执行此操作。我添加了一个简单的循环来获取每个选项卡，并在jQuery validate的invalidHandler（）中调用validateTab（）

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上没有验证，因此即使没有提供其他必需字段，每次提交表单都有效。

我是否应该以不同的方式或在不同的位置验证选项卡以更新失败提交的选项卡外观？

谢谢，森

Answer 1

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/

Answer 2

您不需要验证invalidHandler中每个选项卡的代码。由于当您提交表单时，选项卡已经在表单内部，因此所有内容都会得到验证。

只需从invalidHandler

中删除以下行

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

删除上述内容后，这是fiddle，一切正常。

jQuery验证，在提交

2 个答案: