I am running validation on tab one input fields when the second tab is clicked.
Please take a look at my HTML code:
<ul class="nav nav-tabs makeblock" role="tablist">
<li class="nav-item"> <a class="nav-link active" href="#StuAdmn" role="tab" data-toggle="tab">Admission</a> </li>
<li class="nav-item" id="tabStudentGeneralDetails"> <a class="nav-link" href="#stuGenDetails" role="tab" data-toggle="tab">General </a> </li>
<li class="nav-item"> <a class="nav-link" href="#stuParentDetails" role="tab" data-toggle="tab">Parent</a> </li>
<li class="nav-item"> <a class="nav-link" href="#joingDetails" role="tab" data-toggle="tab">Joining</a> </li>
<li class="nav-item"> <a class="nav-link" href="#stuAdrs" role="tab" data-toggle="tab">Address</a> </li>
<li class="nav-item"> <a class="nav-link" href="#feeDetails" role="tab" data-toggle="tab">Fee </a> </li>
</ul>
</div>
//tab 1 div
<div role="tabpanel" class="tab-pane active fade in" id="StuAdmn">
<div class="col-md-4">
<label for="firstName"><span>*</span>First Name:</label>
<input type="text" class="form-control only-alpha" placeholder="First Name" id="firstName">
</div>
</div>
//tab 2 div
<div role="tabpanel" class="tab-pane fade" id="stuGenDetails">
</div>
I am validating the field with id="firstName" when id="tabStudentGeneralDetails" tab is clicked. I do not want to switch to the clicked tab unless the fields in the previous tabs are validated.
I have attempted the following code:
$(document).on("click",".newSec #tabStudentGeneralDetails",function(e){
var firstName=$(".newSec #firstName").val();
if(firstName == "")
{
$(this).find("a").attr("aria-expanded",false);
alert("Please enter the student's first name!");
}
});
With the above code, I am able to validate the fields in the first tab but unable to prevent moving to the clicked tab if the data in the first tab is incorrect.
Could someone provide assistance with this?
Thank you.