使用bootstrap nav-pill單擊“下一步”按鈕進行表單驗證

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

在線演示（jsFiddle）

Answer 2

你已經在'.btn-next'上有一個事件處理程序在同一個元素上定義另一個事件處理程序將按照你附加事件處理程序的順序執行它們。（你可以通過操作冒泡來改變順序階段和捕獲階段，但只有在使用addEventListener時才會起作用。）

解決方案1：

您可以設置一個布爾變量並將驗證狀態指定給它，並在下一個nav-pill上觸發click事件之前檢查狀態。

在這種方法中，綁定事件處理程序的順序很重要。

將解決方案附加為下面的內聯代碼段

注意：此解決方案不具有可擴展性和可維護性，而且過於天真。

解決方案2：

替代解決方案是您需要確保在單個函數中驗證所有內容並讀取狀態並觸發導航丸事件。

https://jsfiddle.net/8b7pq08a/

注意：如果要添加多個驗證，例如checkEmpty，則需要對“listOfRequiredFields”進行一些修改。 將其轉換為具有驗證函數作為值的對象將幫助您識別必須在該字段上執行的函數。 [UPDATE]

使用問題中的代碼片段而不是小提琴。

  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> 

Answer 3

表單驗證不僅僅涉及檢查字段是否填寫。 因此，您應該使用Ajax將相關數據提交到服務器，並使用服務器端表單驗證。

在頁面頂部添加隱藏的div以顯示驗證錯誤：

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

將共享的“validate”類添加到將觸發表單驗證的所有按鈕。 我們將有三組不同的驗證邏輯。 為該字段提供與函數名稱匹配的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()));
    }
}

這將允許您驗證數據是否已提交且數據是否有效。 用戶仍然可以點擊他們自己從一個導航葯丸導航到另一個導航葯丸，但他們將無法在不填寫必要字段的情況下提交表格。

Answer 4

你在這里看到演示的例子

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