CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrap
user137187
user137187

Reputation:

Bootstrap Active tab on modal hidden

I am using Bootstrap as Framework for designing a form, the form has fields in several tabs, I added a onSubmit event that displays a modal if there are any empty field cancels the submit and focuses the field, if the field is in the active tab and running, but if the field is in an inactive tab the field is not focused.

The Javascript I use is this:

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

Dont Work.... Help please.

Upvotes: 0

Views: 742

Answers (1)

hutchbat
hutchbat

Reputation: 796

Actually i don't understand what do you need exaclty, so i've made 2 separate solutions.

1. Validate the whole form - http://jsfiddle.net/Yk8GQ/
Open the tab of the first invalid input.

2. Validate each section separately - http://jsfiddle.net/Yk8GQ/1/
Validate each section seperatly.

To open Bootstrap tab using javascript you should use

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

Upvotes: 1

Related Questions