Showing form validation errors individually using AJAX

Showing form validation errors individually using AJAX - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Showing form validation errors individually using AJAX (/showthread.php?tid=68538)

Showing form validation errors individually using AJAX - nullstrike - 07-23-2017

I want to individually show form validation errors under each input fields. I got it to work but the problem is if the field is already valid the element which handles the form error is not hiding.

Here's my ajax code:

Code:
function patient_add(){

    $.ajax({

        url: site_url('patient/patient_add'),

        data: $('#patient_form').serialize(),

        type: 'post',

        dataType: 'json',

       success: function(response){

        if(response.status === true){

            user_success(' fa fa-check-o','green',response.message,false);

            setTimeout(function(){window.location.href = response.page;},3000);

        }else{

                $.each(response.errors,function(key,val){

                    $('input[name="' + key + '"]').next().html(val).addClass('has-error');

                    $('select[name="' + key + '"]').next().html(val).addClass('has-error');

                });

            }

        }

    });

}

Here's my view:

Code:
<div class="col-md-6">

                             <div class="form-group">

                            <label for="firstname">First Name</label>

                            <input type="text" class="form-control" name="firstname">

                            <span class="text-danger"></span>

                        </div>

                        <div class="form-group">

                            <label for="firstname">Middle Name</label>

                            <input type="text" class="form-control" name="middlename">

                            <span class="text-danger"></span>

                        </div>

                        <div class="form-group">

                            <label for="firstname">Last Name</label>

                            <input type="text" class="form-control" name="lastname">

                            <span class="text-danger"></span>

                        </div>

Here's the controller portion.

Code:
 $error = array();

            foreach($this->input->post() as $key => $val){

              $error[$key] = form_error($key);

            }

            $response['errors'] = array_filter($error);

            $response['status'] = false;

RE: Showing form validation errors individually using AJAX - rtenny - 07-26-2017

Add the removeClass before you call the aja to validate

function patient_add(){
// remove any previos error
$('input[name="' + key + '"]').next().html(val).removeClass('has-error');

then do the ajax to validcate

RE: Showing form validation errors individually using AJAX - nullstrike - 07-29-2017

(07-26-2017, 07:35 AM)rtenny Wrote: Add the removeClass before you call the aja to validate

function patient_add(){
// remove any previos error
$('input[name="' + key + '"]').next().html(val).removeClass('has-error');

then do the ajax to validcate

i think it can't be done since the key and val are taken inside the ajax function