引导激活选项卡上的模式隐藏

Bootstrap Active tab on modal hidden

本文关键字：模式 隐藏 激活 选项      更新时间：2023-09-26

我使用Bootstrap作为框架来设计表单，表单在几个选项卡中有字段，我添加了一个onSubmit事件，如果有任何空字段取消提交并聚焦字段，如果字段在活动选项卡中并运行，但如果字段在非活动选项卡中，则字段不聚焦。

我使用的Javascript是这样的: 
function validate() {
var field = "";
var textoffield = "";
var tab1 = ['field1', 'field2', 'field3'];
//if field is empty
if ($("#field1").value == "") {
field = "field1";
textoffield = "Field Number One";
}    .... //for each field ...

//If field is in tab1
if (tab1.indexOf(field) >=0) {
      document.getElementById("mymodal").textContent = "The Field " + textoffield + " can not be empty";
      $("#mymodal").modal('show');
      $('#mymodal').on('hidden.bs.modal', function(e) {
        //Disable active tab3 (where is the submit)
        document.getElementById("tab3").className = "";
        //Enable tab1 (where is the field1)
        document.getElementById("tab1").className = "active";
        document.getElementById("tab1").className = "tab-pane fade active in";
        //Focus in the field
        document.getElementById(field).focus();
        });     
    }
 }

不工作…请帮助。

实际上我不知道你到底需要什么，所以我做了两个单独的解决方案。

1。验证整个表单 - http://jsfiddle.net/Yk8GQ/
打开第一个无效输入的选项卡。

2。分别验证每个节 - http://jsfiddle.net/Yk8GQ/1/
分别验证每个节

使用javascript打开Bootstrap选项卡，你应该使用

// let's open a tab with link #tab1
$('.nav-tab a[href=#tab1]').tab('show');
相关文章：