引导程序3选项卡和HTML5表单验证

验证隐藏选项卡上的元素的经典问题。我已阅读了一百个带有复杂变通办法的帖子。有没有人有一个更简单，更优雅的解决方案，在一般情况下工作？即没有针对每种形式编码？引导程序3选项卡和HTML5表单验证

HTML5承诺一个优雅的解决方案。但标签开溜起来......

感谢

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

我希望有人有一个很好的通用技术解决方案，不需要每个页面上的代码witing。 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>

来源

2014-05-20 PrecisionPete

你想要做的一个例子在这里会有所帮助。 – pennstatephil

如果您添加了必填字段，则问题将显示在引导示例上...参见上文。 – PrecisionPete

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

我现在使用“Bootstrap Validator”（http://bootstrapvalidator.com/）有相当好的运气。它可以与标签一起工作，响应HTML5验证标签，并且有很多验证器。仍然非常新，但它似乎正在积极努力。进行得顺利。

来源

2014-05-25 16:31:37 PrecisionPete

Hi @PrecisionPete此插件已付款。你如何使用验证插件，你能告诉我吗？ – user2480902

可以使用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">

有关详细信息请参阅本W3School

来源

2014-05-21 04:45:56

这很有趣。但是它如何解决验证隐藏域的问题？ – PrecisionPete

最讨厌的问题，人们会认为铬（或任何其他b具有此问题）rowser将检查其可见做任何事情之前，但像好“醇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'); 
})

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

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

来源

2014-05-24 07:07:22

聪明，我喜欢。但是如何防止提交仍然？ –

在您的表单提交检查中，查找空的/无效的字段，这些字段具有“被要求”的字段。 –

引导程序3选项卡和HTML5表单验证

回答

相关问题