使用引导程序 nav-pill 单击下一步按钮时的表单验证

Posted

技术标签:

【中文标题】使用引导程序 nav-pill 单击下一步按钮时的表单验证【英文标题】：Form validation on click Next Button using bootstrap nav-pill 【发布时间】：2018-07-12 20:16:04 【问题描述】：

我正在使用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 来纠正当前导航药丸中的无效输入字段。我查看了其他问题，但我无法得到明确的解决方案。请帮助我解决此问题。

【问题讨论】：

【参考方案1】：

您可以在此处查看演示示例

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps

【讨论】：

【参考方案2】：

您已经在“.btn-next”上有一个事件处理程序在同一个元素上定义另一个事件处理程序只会按照您附加事件处理程序的顺序执行它们。（您可以通过以下方式更改顺序操纵冒泡阶段和捕获阶段，但只有在使用 addEventListener 时才有效。）

解决方案一：

您可以设置一个布尔变量并将验证状态分配给该变量，并在触发下一个导航药丸上的点击事件之前检查状态。

在这种方法中，您绑定事件处理程序的顺序很重要。

将解决方案附加为下面的内联代码sn-p

注意：此解决方案不可扩展和可维护，而且过于幼稚。

解决方案 2：

替代解决方案是您需要确保在单个函数中验证所有内容，读取状态并触发导航药丸事件。

https://jsfiddle.net/8b7pq08a/

注意：如果您想添加多个验证，例如 checkEmpty，您需要对“listOfRequiredFields”进行一些修改。将其转换为具有验证函数作为值的对象将帮助您识别必须在该字段上执行的函数。 [更新]

使用问题中的代码 sn-p 而不是小提琴。

 var validationStatus = true;
 
//  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.');
     validationStatus = false;
   
);

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

$('.btnPrevious').click(function() 
  if(validationStatus) $('.nav-pills > .active').prev('li').find('a').trigger('click');
);
<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>

【讨论】：

@ManiRaj ：不确定您是否理解我的解决方案。因此，我复制了您的 sn-p 并移动了事件处理程序，以便您了解问题所在。【参考方案3】：

表单验证不仅仅是检查一个字段是否被填写。为此，您应该使用 Ajax 向服务器提交相关数据，并使用服务器端表单验证。

在页面顶部添加一个隐藏的 div 以显示验证错误：

<div class="alert alert-danger col-xs-12 hidden" id="error"></div>

为所有将触发表单验证的按钮添加一个共享的“验证”类。我们将拥有三组不同的验证逻辑。为字段提供与函数名称匹配的 id（例如“validate_1”、“validate_2”等）。

<a class="btn btn-primary btnNext pull-right validate" id="validate_1">Next</a>
<a class="btn btn-primary btnNext pull-right validate" id="validate_2">Next</a>

更新您的 jQuery 以包含 Ajax POST 函数。此函数将数据提交到您可以使用 Codeigniter 的原生表单验证的服务器：

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


$(document).on('click','.validate',function(e)
    e.preventDefault();
    if($('#error').is(":visible"))
        $('#error').empty().addClass('hidden'); //refresh error message if it was triggered previously
    
    var form = $(this).closest('form');
    $.ajax(        
        url: this.id,
        type: 'POST',
        data: form.serialize(),
        dataType: 'html',
        success: function(data) 
            var result = $.parseJSON(data);
            if(result["error"]===undefined)
                $('.nav-pills > .active').next('li').find('a').trigger('click');
            else
                $('#error').append(result["error"]).removeClass('hidden');
            
        ,
        error: function()  
    );
);

然后在你的控制器中：

function validate_1() //function name matches element id
    $this->load->library('form_validation');    
    $this->form_validation->set_rules('admission_no', 'Admission Number', 'required|integer|greater_than[0]');
    $this->form_validation->set_rules('application_no', 'Application Number', 'required|integer|greater_than[0]');
    $this->form_validation->set_rules('academic_year', 'Academic Year', 'required|integer|greater_than[0]');
    if($this->form_validation->run() == TRUE)
         echo json_encode(array('success' => 1));
    else
        echo json_encode(array('error' =>  validation_errors()));
    


function validate_2()
    $this->load->library('form_validation');    
    $this->form_validation->set_rules('firstname', 'First Name', 'required');
    $this->form_validation->set_rules('dob', 'Date of Birth', 'required');
    $this->form_validation->set_rules('student_address', 'Address', 'required');
    if($this->form_validation->run() == TRUE)
        echo json_encode(array('success' => 1));
    else
        echo json_encode(array('error' =>  validation_errors()));

这将允许您验证数据是否已提交并且是否有效。用户仍然可以单击自己从一个导航药丸导航到另一个导航药丸，但如果不填写必要的字段，他们将无法提交表单。

【讨论】：

我已经完成了 codeigniter 验证，我需要的只是一个，每当用户单击 Next 按钮时，如果不填写第一个 nav- 中的必填字段，它不应该进入下一个 nav-pill药丸.. 只有在这种情况下我才需要帮助。 @ManiRaj 这个响应处理 感谢@Dan 的回答。【参考方案4】：

你可以这样做：

$('.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)

【讨论】：

它正在按要求制作所有内容，我不会按要求拥有所有输入框，有些可能是必填字段，有些可能不是..为此我该怎么办？？ @ManiRaj 您可以在需要验证的输入中添加类似 (yourClass) 的类，然后在此部分使用它$(this).closest('.tab-pane').find('.yourClass')。

以上是关于使用引导程序 nav-pill 单击下一步按钮时的表单验证的主要内容，如果未能解决你的问题，请参考以下文章

使 nav-pills 可折叠，就像引导程序中的导航栏一样

如何使用javascript记录链接点击，然后自动点击Qualtrics中的下一步按钮？

bootcamp安装windows一直正在下载软件

为 iOS 应用程序创建了一个下一步按钮...单击时出现 SIGABRT 错误

Tutorial Master 2丨Trigger：如何让你的引导项进入下一步

Tutorial Master 2丨Trigger：如何让你的引导项进入下一步