使用bootstrap nav-pill单击“下一步”按钮进行表单验证

Question

I am using nav-pill inside which there is a form and that is split up into each part say as admission details, personal details, family Details with "Next" button on each step and save button at last nav-pill.

$('.btnNext').click(function() {
  $('.nav-pills > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-pills > .active').prev('li').find('a').trigger('click');
});

//  Bind the event handler to the "submit" JavaScript event
$('#validateFirst').click(function() {

  // Get the Login Name value and trim it
  var name = $.trim($('#admission_no').val());

  // Check if empty or not
  if (name === '') {
    alert('Admission No. field is empty.');
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav nav-pills nav_content">
  <li class="active"><a data-toggle="pill" href="#admission">Admission Details</a></li>
  <li><a data-toggle="pill" href="#personal">Personal Details</a></li>
  <li><a data-toggle="pill" href="#family">Family Details</a></li>
</ul>

<form id="form1" action="<?php echo site_url('student/create') ?>" id="employeeform" name="employeeform" method="post" accept-charset="utf-8" enctype="multipart/form-data">
  <div class="tab-content">
    <div id="admission" class="tab-pane fade in active">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Admission Number *</label>
            <input id="admission_no" name="admission_no" placeholder="" type="text" class="form-control" value="admission_no" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Application Number  *</label>
            <input id="application_no" name="application_no" placeholder="" type="text" class="form-control" value="application_no" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Academic Year  *</label>
            <input id="academic_year" name="academic_year" placeholder="" type="text" class="form-control" value="academic_year" />
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnNext pull-right" id="validateFirst">Next</a>
    </div>
    <div id="personal" class="tab-pane fade">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">First Name *</label>
            <input id="firstname" name="firstname" placeholder="" type="text" class="form-control" value="firstname" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">DOB *</label>
            <input id="dob" name="dob" placeholder="" type="text" class="form-control" value="DOB" readonly="readonly" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputFile">Address  *</label>
            <textarea id="student_address" name="student_address" placeholder="" class="form-control" rows="2"></textarea>
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnPrevious pull-left">Previous</a>
      <a class="btn btn-primary btnNext pull-right">Next</a>
    </div>
    <div id="family" class="tab-pane fade">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Father Name *</label>
            <input id="father_name" name="father_name" placeholder="" type="text" class="form-control" value="father_name" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Father Occupation *</label>
            <input id="father_occupation" name="father_occupation" placeholder="" type="text" class="form-control" value="father_occupation" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Mother Name *</label>
            <input id="mother_name" name="mother_name" placeholder="" type="text" class="form-control" value="mother_name" />
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnPrevious pull-left">Previous</a>
      <button type="submit" class="btn btn-info pull-right">Save</button>
    </div>
  </div>
</form>

I have tried with button click function while clicking "Next" button like:

$('#validateFirst').click(function () {
    // Get the Login Name value and trim it
    var name = $.trim($('#admission_no').val());
    // Check if empty of not
    if (name === '') {
        alert('Text-field is empty.');
        return false;
    }
});

Where button has id "validateFirst",

<a class="btn btn-primary btnNext pull-right" id="validateFirst">Next</a>

Here it shows alert when the admission no input is not filled but moves to the next tab (i.e.) personal details while clicking the next button. The thing i am in the need is while clicking the next button if the fields in the current nav-pill fields are empty (say admission no field is not filled in first nav pill) and clicking the next button, it should display alert and should not move to next nav-pill to rectify the invalid input fields in the current nav-pill.. I had a look around other questions but I couldn't get a clear solution. Kindly help me with a solution to resolve this issue.

</div>

Answer 1

You can do it like this:

$('.pull-right').click(function () {
    var validationMessage = '';

    // Check inputs are filled.
    $.each($(this).closest('.tab-pane').find('input[type="text"]'), function () {
        if ($(this).val() == '') 
            validationMessage += "Please fill " + $(this).closest('.form-group').find('label').html().replace('*', '') + "
";           
    });

    // Validation is false
    if (validationMessage != '')
        alert(validationMessage);
    else
        $('.nav-pills > .active').next('li').find('a').trigger('click');
});

Online demo (jsFiddle)