Bootstrap 3 标签和 HTML5 表单验证

Question

经典的验证元素的问题，是在一个隐藏的标签上。我读了上百个关于复杂工作方法的帖子。有没有人有一个更简单、更优雅的解决方案，可以在通用的情况下工作，即不为每个表单专门编码？

HTML5承诺提供一个优雅的解决方案。但Tabs却把它搞砸了......

谢谢你

更多...？从Bootstrap的例子中。如果你的字段被标记为 "必填"（HTML5验证），那么对于非活动（隐藏）的标签页，验证将不起作用。而且我相信其他的javascript验证技术也会对tab失效。

我希望有人能有一个好的通用技术来解决这个问题，而不需要在每个页面上的代码中都要进行验证。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'作为临时方案。

我还必须在选择器中添加我的表单类.form-ajax，因为我的表单在tabs范围之外。

Answer 2

我放弃了HTML5验证......。也许将来会这样。但它还是有一些问题。

我现在使用 "Bootstrap Validator"(http:/bootstrapvalidator.com。). 它能很好地与标签一起工作，响应HTML5验证标签，并有很多验证器。虽然还很新，但似乎正在积极努力。它的进展很顺利。

Answer 3

这可能会对某人有所帮助

也要遵循上级所说的 更优雅的解决方案，在一般情况下工作，即不专门为每种形式编码。

我不得不切换到输入无效的标签页（在我的例子中，需要输入的是textareas）。

$("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');
}

注 因为上级要求的是通用案例的解决方案，这将不会切换活动标签链接，我必须通过添加ids和正确的目标标签链接来实现，你也可以基于其他表单输入验证与此，我的案例是。textarea

Answer 4

您可以使用HTML5新功能

输入表单属性

形式属性指定一个元素所属的一个或多个形式。

例子 根据 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">

更多信息请看这里 W3S学校