jquery - 关注 Bootstrap 选项卡中的必填字段

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

我也遇到了同样的问题，我是这样解决的:

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

希望您能帮忙!