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

Question

下午， 我正在使用 PHP、HTML5 和 Bootstrap。 我已经建立了一个表格，它被分隔在 5 个选项卡中，并且在这个表格中有几个必填字段。 所有必需的输入字段都是“文本”，并且还标有 required="required" aria-required="true"。

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

如果更容易检查选项卡更改时选项卡所需的字段..

页面上只有 1 个表单。

非常感谢

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

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

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

Answer 2

我也有同样的问题，我是这样解决的：

<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>

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

希望你能帮忙！

Answer 3

玩了一会儿后，我想出了一个可行的答案..

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');

使用引导程序上的代码，我只需将 .tab('show') 函数应用于该选项卡。