专注于引导选项卡中的必填字段

下午，我使用PHP，HTML5和Bootstrap。 我已经构建了一个分隔5个选项卡的表单，在这个表单中有几个必填字段。 所需的所有输入字段均为“text”，并且还标有required =“required”aria-required =“true”。

在提交时，如果在当前选项卡上，html5validation会捕获错误，但是我想使用一些jquery来重新关注尚未填充的正确选项卡和输入字段并显示警告框。 我不确定这是否可行..

要么就是这样，如果更容易检查选项卡上的选项卡需要字段更改..

页面上只有一个表单。

非常感谢

**编辑**我在修补后为必填字段创建了一个警报function，但它仍然不会改变选项卡以专注于必填字段。 ‘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; } }); 

基本上如果error = 1，它将弹出错误消息，其中输入id已被遗漏。 然后它无法提交返回false的表单。 它确实专注于错过的场地，并在场地周围放置一个红色边框。 但它并不专注于标签..否则它将提交表格。

Answer 1

我遇到了同样的问题，我这样解决了：

当您单击提交按钮（您需要对其进行ID）时，它会查找无效的输入字段，获取最近的.tab-pane id并显示它。

希望你帮忙！

Answer 2

经过一段时间的游戏后，我想出了一个有效的答案..

 if(error == 0){ $(this).focus(); var tab = $(this).closest('.tab-pane').attr('id'); $('#myTab a[href="#' + tab + '"]').tab('show'); } 

我刚刚将上面的额外2行替换为上面的代码，它现在自动显示正确的选项卡。 我们做的是使用$（this）.closest（’。tab-pane’）。attr（’id’）;找到所需字段的最近id。

使用bootstrap上的代码我只需将.tab（’show’）函数应用于该选项卡。

Answer 3

我找到了最简单的解决方案。 这可能会有所帮助;）

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