부트 스트랩 모달 숨겨진 활성 탭

Question

양식을 디자인하기위한 프레임 워크로 부트 스트랩을 사용하고 양식에 여러 탭이있는 필드가 있습니다. 빈 필드가있는 경우 모달을 표시하는 onSubmit 이벤트를 추가하여 제출을 취소하고 필드에 초점을 맞 춥니 다. 필드가 활성 탭에 있고 실행 중이지만 필드가 비활성 탭에 있으면 필드가 초점을 맞추지 않습니다. 내가 사용하는

자바 스크립트는 이것이다 :

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

실제로 나는 당신이 exaclty가 필요하다는 것을 이해하지 못한다. 그래서 나는 2 개의 분리 된 해결책을 만들었다.

1. 전체 양식 유효성 검사 - http://jsfiddle.net/Yk8GQ/
첫 번째 잘못된 입력 탭을 엽니 다.

2. 각 섹션을 별도로 확인하십시오. - http://jsfiddle.net/Yk8GQ/1/
각 섹션을 seperatly 확인하십시오.

당신이 사용해야 자바 스크립트를 사용하여 부트 스트랩 탭을 열려면

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