Bootstrap 3 选项卡和 HTML5 表单验证

Question

验证隐藏选项卡上的元素的经典问题。我已经阅读了一百篇具有复杂解决方法的帖子。有没有人有一个更简单、更优雅的解决方案，适用于通用案例？即没有针对每种形式专门编码？

HTML5 承诺提供一个优雅的解决方案。但是 Tabs 搞砸了……

谢谢

更多..？来自 Bootstrap 示例。如果您有标记为“必填”的字段（HTML5 验证），则验证将不适用于非活动（隐藏）选项卡。而且我相信其他 javascript 验证技术也会因标签而失败。

我希望有人有一个很好的通用技术来解决，它不需要在每一页上的代码中都写。 HTML5 验证既漂亮又干净 - 直到您添加标签...

它不会提交。但它也不会报错...

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...
    <input type="text" name="name" required>
  </div>
  <div class="tab-pane" id="messages">...
    <input type="text" name="address" required>
  </div>
  <div class="tab-pane" id="settings">...</div>
</div>

Answer 1

最烦人的问题是，人们会认为 chrome（或任何其他有此问题的浏览器）会在执行任何操作之前检查其是否可见，但就像优秀的互联网浏览器时代一样，必须解决浏览器问题..

$(document).on('shown.bs.tab','a[data-toggle="tab"]',function(e){
    $(':input[required]:hidden').removeAttr('required').addClass('wasrequired');
    $('.wasrequired:visible').removeClass('wasrequired').prop('required', 'required');
})

我不想修改代码中的任何内容，但另一种解决方案是添加 class='required'，因此我们不需要使用 'wasrequired' 作为 tmp 解决方案。

我还必须在选择器中添加我的表单类 .form-ajax，因为我的表单超出了选项卡范围。

Answer 2

我放弃了 HTML5 验证...也许在未来。但是还是有一些问题。

我现在使用“Bootstrap Validator”(http://bootstrapvalidator.com/) 运气不错。它适用于标签，响应 HTML5 验证标签，并且有很多验证器。仍然很新，但似乎正在积极工作。进展顺利。

Answer 3

这可能对某人有帮助

还要遵循 OP 所说的 更优雅的解决方案，适用于一般情况？即没有针对每种形式专门编码

我不得不切换到输入无效的选项卡（在我的情况下，所需的输入是文本区域）

$("form textarea").on("invalid", function(){
    var invalid_input = $(this).closest('.tab-pane').index();
    var all_tabs = $('.tab-pane');
    var tabs_id = all_tabs[invalid_input].id;

    var activeTabLink = $('.nav-link.active.show');
    var activeTab = $('.tab-pane.active.show');
    showTabWithInvalidInput(activeTab[0].id, tabs_id)
});

function showTabWithInvalidInput(currentTab, invalidTab) {
    $('#'+currentTab).removeClass('active');
    $('#'+invalidTab).addClass('active');
    $('#'+invalidTab).addClass('show');
}

注意因为 OP 要求解决一般情况，这不会切换活动标签链接，我必须通过添加标签链接的 ID 并正确定位它们来实现， 您也可以使用此基于其他表单输入进行验证，我的情况是 textarea

Answer 4

您可以使用 HTML5 新功能

输入表单属性

form 属性指定一个或多个表单元素 属于。

示例根据http://www.w3schools.com/

位于 HTML 表单之外的输入字段（但仍然是表单的一部分）：

<form action="demo_form.asp" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">   
 </form>

 Last name: <input type="text" name="lname" form="form1">

欲了解更多信息，请参阅此W3School