twitter-bootstrap 关注引导程序选项卡中的必填字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16235038/
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
focus on required field in bootstrap tabs
提问by South Coast Web
Afternoon, I am using PHP, HTML5 and Bootstrap. I have built a form which is seperated across 5 tabs and within this form are several required fields. All input fields that are required are 'text' and also marked with required="required" aria-required="true".
下午，我正在使用 PHP、HTML5 和 Bootstrap。我已经构建了一个跨 5 个选项卡分隔的表单，并且在这个表单中有几个必填字段。所有必需的输入字段都是“文本”，并且还标有 required="required" aria-required="true"。
On submit the html5 validation catches the errors if on the current tab, however I would like to use a bit of jquery to focus back on the correct tab and input field that has not been filled in and display an alert box. Im not sure if this is possible..
提交时，html5 验证会在当前选项卡上捕获错误，但是我想使用一些 jquery 来关注尚未填写的正确选项卡和输入字段并显示警报框。我不确定这是否可能..
Either that, if its easier to check that tabs required fields on tab change..
或者，如果更容易检查选项卡上的选项卡必填字段更改..
There is only 1 form on the page.
页面上只有 1 个表单。
Many Thanks
非常感谢
** edit ** I have after tinkering around created an alert function for the required fields but it still will not change the tab to focus on the required field. 'productbutton' is the id of my submit button for the whole form. 'product_form' is the id of my form.
** 编辑 ** 我在修改后为必填字段创建了一个警报功能，但它仍然不会更改选项卡以专注于必填字段。'productbutton' 是整个表单的提交按钮的 ID。'product_form' 是我的表单的 id。
$('#productbutton').click(function(){
var error = 0;
var msg = 'An Error Has Occured.\n\nRequired Fields missed are :\n';
$(':input[required]', '#product_form').each(function(){
$(this).css('border','2px solid green');
if($(this).val() == ''){
msg += '\n' + $(this).attr('id') + ' Is A Required Field..';
$(this).css('border','2px solid red');
if(error == 0){ $(this).focus(); }
error = 1;
}
});
if(error == 1) {
alert(msg);
return false;
} else {
return true;
}
});
Basically if error = 1 it will popup an error msg with the input id that have been missed. it then fails to submit the form with a return false. It does focus on the missed field and place a red border around field. But it does not focus on the tab.. Otherwise it will submit the form.
基本上，如果 error = 1 它将弹出一个错误消息，其中包含丢失的输入 id。然后它无法提交表单并返回 false。它确实专注于错过的字段并在字段周围放置红色边框。但它不关注选项卡.. 否则它会提交表单。
回答by Paco Orozco
I'd the same problem and I solve it this way:
我遇到了同样的问题，我是这样解决的：
<script>
$('#submitButton').click(function () {
$('input:invalid').each(function () {
// Find the tab-pane that this element is inside, and get the id
var $closest = $(this).closest('.tab-pane');
var id = $closest.attr('id');
// Find the link that corresponds to the pane and have it show
$('.nav a[href="#' + id + '"]').tab('show');
// Only want to do it once
return false;
});
});
</script>
When you click on submit button (yo need to ID it) it looks for invalid input fields, get the closest .tab-paneid and show it.
当您单击提交按钮（您需要对其进行 ID）时，它会查找无效的输入字段，获取最接近的.tab-paneID 并显示它。
Hope you help!
希望对你有所帮助！
回答by Nizwer
I found a simplest solution. This might help ;)
我找到了一个最简单的解决方案。这可能会有所帮助 ;)
$('#productbutton').click(function () {
$(':required:invalid', '#product_form').each(function () {
var id = $('.tab-pane').find(':required:invalid').closest('.tab-pane').attr('id');
$('.nav a[href="#' + id + '"]').tab('show');
});
});
回答by South Coast Web
After a bit more playing i have come up with a working answer..
玩了一会儿后，我想出了一个可行的答案..
if(error == 0){
$(this).focus();
var tab = $(this).closest('.tab-pane').attr('id');
$('#myTab a[href="#' + tab + '"]').tab('show');
}
I just replaced the extra 2 lines above into my code above and it now automatically shows the correct tab. What is does is finds the nearest id to required field using the $(this).closest('.tab-pane').attr('id');
我只是将上面额外的 2 行替换为上面的代码，现在它会自动显示正确的选项卡。它的作用是使用 $(this).closest('.tab-pane').attr('id'); 找到离必填字段最近的 id；
Using the code on bootstrap i simply apply the .tab('show') function to that tab.
使用引导程序上的代码，我只需将 .tab('show') 函数应用于该选项卡。
