Question

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

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

要么，如果更容易检查选项卡上的标签需要更改的字段..

页面上只有一个表单。

非常感谢

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

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

<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-pane ID并显示它。

希望你能帮忙！

Answer 2

经过一段时间的游戏，我得到了一个有效的答案..

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

我刚将上面的额外2行替换为上面的代码，它现在自动显示正确的选项卡。我们做的是使用。找到所需字段的最近id $（本）.closest（ '标签窗格。 '）ATTR（' 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');
   });
});

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

3 个答案: