Question

我使用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();
        });     
    }
 }

不要工作.... 请帮助。

Answer 1

实际上我并不了解你需要什么，所以我已经做了两个独立的解决方案。

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

模态隐藏的Bootstrap Active选项卡

1 个答案: