twitter-bootstrap Bootstrap 3 选项卡和 HTML5 表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23769489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Tabs and HTML5 form validation
提问by PrecisionPete
Classic problem of validating an element that is on a hidden tab. I've read a hundred posts with complex workarounds. Does anyone have a simpler, more elegant solution that works in a generic case? i.e. not coded specifically to each form?
验证隐藏选项卡上的元素的经典问题。我已经阅读了一百篇带有复杂解决方法的帖子。有没有人有一个更简单、更优雅的解决方案，适用于一般情况？即没有专门针对每种形式进行编码？
HTML5 promises an elegant solution. But Tabs bugger it up...
HTML5 承诺提供一个优雅的解决方案。但是 Tabs 把它搞砸了......
Thanks
谢谢
More..? From the Bootstrap examples. If you have fields marked "required" (HTML5 validation), the validation will not work for the non-active (hidden) tabs. And I believe other javascript validation techniques also fail with tabs.
更多的..？来自 Bootstrap 示例。如果您将字段标记为“必填”（HTML5 验证），则验证将不适用于非活动（隐藏）选项卡。而且我相信其他 javascript 验证技术也会因选项卡而失败。
I'm hoping someone has nice a generic technique to solution which does not require witing into the code on every page. HTML5 validation is nice and clean - until you add tabs...
我希望有人有一个很好的通用技术来解决这个问题，它不需要在每个页面上编写代码。HTML5 验证很好而且很干净 - 直到你添加标签...
It won't submit. But it won't give an error either...
它不会提交。但是也不会报错...
<!-- 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>
采纳答案by PrecisionPete
I gave up on HTML5 validation... Maybe in the future. But it's still got some problems.
我放弃了 HTML5 验证......也许在未来。但它仍然存在一些问题。
I am now having pretty good luck using "Bootstrap Validator" (http://bootstrapvalidator.com/). It works fine with tabs, responds to the HTML5 validation tags, and has lots of validators. Still pretty new but it seems to be actively worked on. It's going well.
我现在使用“Bootstrap Validator”（http://bootstrapvalidator.com/）很幸运。它适用于选项卡，响应 HTML5 验证标签，并且有很多验证器。仍然很新，但似乎正在积极开展工作。进行得顺利。
回答by asked_io
Most annoying problem, one would think chrome (or any other browser that has this issue) would check if its visible before doing anything, but like the good 'ol internet explorer days one must hack around a browser issue..
最烦人的问题是，人们会认为 chrome（或任何其他有这个问题的浏览器）会在做任何事情之前检查它是否可见，但就像好的 'ol Internet Explorer 时代一样，你必须解决浏览器问题..
$(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');
})
I didn't want to have to modify anything in my code but another solution is to add a class='required' so we dont need to use 'wasrequired' as a tmp solution.
我不想修改代码中的任何内容，但另一种解决方案是添加 class='required'，因此我们不需要使用 'wasrequired' 作为 tmp 解决方案。
I also had to add my form class, .form-ajax in the selectors since my form was outside the tabs scope.
我还必须在选择器中添加我的表单类 .form-ajax，因为我的表单超出了选项卡范围。
回答by Bosco
This might help someone
这可能会帮助某人
To also follow what the OP said more elegant solution that works in a generic case? i.e. not coded specifically to each form
还要遵循 OP 所说的适用于通用情况的更优雅的解决方案吗？即没有专门针对每种形式进行编码
I had to switch to the tab with the invalid input(in my case the inputs that have required were textareas)
我不得不切换到带有无效输入的选项卡（在我的情况下，需要的输入是 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');
}
NOTEBecause the OP requested solution for generic case, this will not switch the active tab link, I had to acheived that by adding ids the tab links and targeting them properly,
You can also validate based on other form inputs with this, my case was textarea
注意因为 OP 要求通用案例的解决方案，这不会切换活动标签链接，我必须通过添加标签链接的 id 并正确定位它们来实现这一点，您还可以根据其他表单输入进行验证，我的案例是textarea
回答by Nitish Kumar
You can use HTML5 new feature
您可以使用 HTML5 新功能
input form Attribute
The form attribute specifies one or more forms an element belongs to.
输入表单属性
form 属性指定一个元素所属的一个或多个表单。
Example According to http://www.w3schools.com/
示例 根据 http://www.w3schools.com/
An input field located outside the HTML form (but still a part of the form):
位于 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">
<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">
For more Info See This W3School
有关更多信息，请参阅此W3School
