Validation of the form when you click "Next" using bootstrap

Question

I use nav-pill , in which there is a form, and which is divided into each part, like information about the reception, personal data, family information with the "Next" button at each step and the save button 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 tried the button click function when I click the Next button, for example:

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

If the id button is "validateFirst",

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

Here it shows an alert when the input without input is not filled, but goes to the next tab (i.e.) personal data when you click the next button. What I need is to press the button of the next button if the fields in the current nav-pill field are empty (say that the input field is not filled with the first navigation pill) and clicking the next button, it should display a warning and should not go to the next nav-pill to fix invalid input fields in the current navigation tablet. I looked at other questions, but I could not get a clear solution. Please help me with a solution to solve this problem.

Answer 1

You can do it as follows:

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

Answer 2

You already have an event handler in .btn-next. Defining another event handler in the same element will execute both of them in the order in which you bound the event handler. (You can change the order to manipulate the bubbling phase and capture phase, but this will only work if you use addEventListener.)

Solution 1:

You can set a logical variable and assign it a verification status and check the status before starting the click event in the next navigation panel.

In this approach, the order in which you attach event handlers makes sense.

Attached solution as inline code snippet below

Note. This solution is not scalable and supported, but its too naive.

Solution 2:

An alternative solution. You have to make sure that you check everything in one function, view the status and fire the nav pill event.

https://jsfiddle.net/8b7pq08a/

Note. If you want to add some checks, such as checkEmpty, you need to make some changes to "listOfRequiredFields". Converting it to an object with validation functions as a value will help you determine the functions that should be performed in the field. [UPDATE]

Using a code snippet from a question instead of a script.

  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

Form validation should include not only checking whether the field is filled out or not. For this reason, you should use Ajax to send the appropriate data to the server and use server-side validation.

At the top of the page, add a hidden div to display validation errors:

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

Add a generic "validate" class to all buttons that will trigger validation of your form. We will have three different sets of validation logic. Give the field an identifier that matches the function name (for example, "validate_1", "validate_2", etc.).

 <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> 

Update your jQuery to enable the AJAX POST function. This function sends data to a server, where you can use Codeigniter's own form validation:

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

And then in your controller:

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

This will allow you to verify that the data has been sent and that it is valid. The user will still be able to click on their own to switch from one navigation pill to another, but they will not be able to submit the form without filling in the required fields.

Answer 4

you see an example here to demonstrate

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