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

Posted 2023-05-09

【中文标题】jQuery Validation，在提交时显示有效/无效的表单选项卡

【英文标题】：jQuery Validation, displaying valid/invalid form tab(s) on submit

【发布时间】：2017-09-05 16:56:18

【问题描述】：

我有一个带有选项卡的表单，以及一个简单的函数，用于在用户在表单选项卡之间移动时验证它们。 （使用 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 'hidden.bs.tab' 事件并调用该函数。

// 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);
  );

这适用于一个例外...当最后一个选项卡有效时，即使其他选项卡上存在错误，表单也会突然提交。似乎调用 valid 会覆盖任何先前的调用或在调用 invalidHandler 之前设置的任何内容。突然，整个表单都提交了，就好像它已经成功验证了一样。

可以在此处找到完整示例。 https://jsfiddle.net/qcean237/1/

目前 TAB 4 上没有验证，因此即使没有提供其他必填字段，每次提交表单都有效。

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

谢谢， 内森

【问题讨论】：

确实如此，直到在最后一个选项卡上调用 valid() 为止。当最后一个选项卡验证整个表单时，以某种方式被认为是有效的。从 invalidHandler() 内部调用 valid() 感觉很脏，但到目前为止我想出的只是这些。

“从 invalidHandler() 内部调用 valid() 感觉很脏” ~ 这就是你的根本问题。

【参考方案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);
    );
);

演示：https://jsfiddle.net/qcean237/2/

【讨论】：

谢谢！我非常专注于在 jquery.validate 中解决这个问题，完全错过了这个。

【参考方案2】：

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

只需从invalidHandler 中删除以下行

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

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

【讨论】：

OP特别声明，“但我也想在提交表单时这样做”

你的回答对我来说很有意义。很好的解释。谢谢！！