javascript - 使用 bootstrap nav-pill 在单击 Next 按钮时进行表单验证

Question

我正在使用 nav-pill，里面有一个表格，它分为每个部分，例如入学详情、个人详细信息、家庭详细信息，每个步骤都有“下一步”按钮并保存按钮 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>

我在单击“下一步”按钮时尝试使用按钮单击功能，例如:

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

按钮有 id "validateFirst",

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

此处显示 alert 当准入没有输入未填写但在单击下一步按钮时移动到下一个选项卡(即)个人详细信息。我需要的是，如果当前 nav-pill 字段中的字段为空(比如第一个导航丸中没有填写任何字段)，然后单击下一步按钮，我需要的是，它应该显示警报并且不应该移动到下一个 nav-pill 来纠正当前 nav-pill 中的无效输入字段。我查看了其他问题但我无法弄清楚解决方案。请帮我解决这个问题。

Answer 1

你可以这样做:

$('.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('*', '') + "\n";           
    });

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

Online demo (jsFiddle)