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

Question

下午,我使用PHP,HTML5和Bootstrap.我已经构建了一个分隔5个选项卡的表单,在这个表单中有几个必填字段.所需的所有输入字段都是"文本",并且还标有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>

当您单击提交按钮(您需要对其进行ID)时,它会查找无效的输入字段,获取最接近的.tab-paneID并显示它.

希望你帮忙!

Answer 2

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

$('#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 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');找到所需字段的最近id.

使用bootstrap上的代码我只需将.tab('show')函数应用于该选项卡.