laravel ajax validation not showing for all fields

Question

I am using jquery ajax validation. The problem is that only for some fields of the form is displayed validation, for others not.

jQuery(document).ready(function()
{
    jQuery('form#inline-validate').submit(function()
    {       
        jQuery.ajax({
            url: "http://localhost:8080/insur_docs/store",
            type: "post",
            data: jQuery('form#inline-validate').serialize(),
            datatype: "json",
            beforeSend: function()
            {
                jQuery('#ajax-loading').show();
                jQuery(".validation-error-inline").hide();
            }
            })
            .done(function(data)
            {
                if (data.validation_failed === 1)
                {
                    var arr = data.errors;
                    jQuery.each(arr, function(index, value)
                    {
                        if (value.length !== 0)
                        {
                            jQuery("#" + index).after('<span class="text-error validation-error-inline">' + value + '</span>');
                        }
                    });
                    jQuery('#ajax-loading').hide();
                }
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                  alert('No response from server');
            });
            return false;
    });
});

insur_docs_controller.blade.php

<div id="div-1" class="body">
            {{ Form::open(array('url' => 'insur_docs/store', 'class'=>'form-horizontal','id'=>'inline-validate')) }} 
            <div class="form-group">
                {{ Form::label('ownership_cert', 'Ownership Certificate*', array('class'=>'control-label col-lg-4')) }}
                <div class="col-lg-8">
                    {{ Form::select('ownership_cert', array('' => '', '1' => 'Yes', '0' => 'No'),Input::old('ownership_cert'),  array(
                                'class' => 'form-control'))
                    }}

                </div>
            </div>
            <div class="form-group">
                {{ Form::label('authoriz', 'Authorization*', array('class'=>'control-label col-lg-4')) }}            
                <div class="col-lg-8">
                    {{ Helpers\Helper::date('authoriz', Input::old('authoriz') , array(
                                'class' => 'form-control')) 
                    }}

                </div>
            </div>
            <div class="form-group">
                {{ Form::label('drive_permis', 'Drive Permission*', array('class'=>'control-label col-lg-4')) }}
                <div class="col-lg-8">
                    {{ Form::select('drive_permis', array('' => '', '1' => 'Active', '0' => 'Not active'),  Input::old('drive_permis'),  array(
                                'class' => 'form-control'))
                    }}

                </div>
            </div>
            <div class="form-group">
                {{ Form::label('sgs', 'SGS*', array('class'=>'control-label col-lg-4')) }}
                <div class="col-lg-8">
                    {{ Helpers\Helper::date('sgs',  Input::old('sgs') , array(
                                'class' => 'form-control')) 
                    }}

                </div>
            </div>  
            <div class="form-group">
                {{ Form::label('tpl', 'TPL*', array('class'=>'control-label col-lg-4')) }}
                <div class="col-lg-8">
                    {{ Helpers\Helper::date('tpl', Input::old('tpl') , array(
                                'class' => 'form-control')) 
                    }}

                </div>
            </div>
            <div class="form-group">
                {{ Form::label('kasko', 'Kasko*', array('class'=>'control-label col-lg-4')) }}
                <div class="col-lg-8">
                    {{ Helpers\Helper::date('kasko', Input::old('kasko') , array(
                                'class' => 'form-control')) 
                    }}

                </div>
            </div>
            <div class="form-group">
                {{ Form::label('inter_permis', 'International Permission*', array('class'=>'control-label col-lg-4')) }}
                <div class="col-lg-8">
                    {{ Helpers\Helper::date('inter_permis', Input::old('inter_permis') , array(
                                'class' => 'form-control')) 
                    }}

                </div>
            </div>
            <div class="form-group">
                {{ Form::label('car', 'Car*', array('class'=>'control-label col-lg-4')) }}
                <div class="col-lg-8">
                    {{ Form::select('car', $cars, Input::old('car'), array( 
                                'data-validation-error-msg' => 'You did not enter a valid car',
                                'class' => 'form-control')) 
                    }}<br/>
                    @if($errors->count() > 0)
                    <div class="alert alert-danger">
                        <p>The following errors have occurred:</p><br/>
                        @foreach($errors->all() as $message)
                        {{ Helpers\Helper::macro($message) }}<br/>
                        @endforeach
                    </div>
                    @endif                
                </div>
            </div>  

            {{ Form::submit('Save', array('class' => 'btn btn-success btn-line')) }}
            <input type="button" value="Back" class="btn btn-danger btn-line" onClick="history.go(-1);
                    return true;">
            {{ Form::close() }}
            {{ HTML::script('assets/js/jquery.validate-form.js') }}
        </div>

So validation is showing only for ownership_cert and drive permis. For other fields not. I have created a function for date which is :

  public static function date($name, $value = null, $options = array()) {
        $input = '<input type="date" name="' . $name . '" value="' . $value . '"';

        foreach ($options as $key => $value) {
            $input .= ' ' . $key . '="' . $value . '"';
        }

        $input .= '>';

        return $input;
    }

May the problem be with this?

Answer 1

Try this:

jQuery(document).ready(function()
{
    jQuery('form').submit(function()
    {
        var url = $(this).attr("action");
        jQuery.ajax({
            url: url,
            type: "post",
            data: jQuery('form').serialize(),
            datatype: "json",
            beforeSend: function()
            {
                jQuery('#ajax-loading').show();
                jQuery(".validation-error-inline").hide();
            }
        })
                .done(function(data)
                {
                    $('#validation-div').empty()
                    if (data.validation_failed === 1)
                    {
                        var arr = data.errors;
                        jQuery.each(arr, function(index, value)
                        {
                            if (value.length !== 0)
                            {
                                $("#validation-div").addClass('alert alert-danger');
                                document.getElementById("validation-div").innerHTML += '<span class="glyphicon glyphicon-warning-sign"></span>' + value + '<br/>';
                            }
                        });
                        jQuery('#ajax-loading').hide();
                    }
                    else {
                        window.location = data.redirect_to;
                    }
                })
                .fail(function(jqXHR, ajaxOptions, thrownError)
                {
                    alert('No response from server');
                });
        return false;
    });
});

Answer 2

I have applied following solution in my project and working fine. Please check.

You need to add following code into your controller.

$validator = Validator::make($input, $rules, $messages);
if ($validator->fails()) {
    $errors = $validator->errors()->getMessages();
    $arr = array("status" => 400, "msg" => $errors, "result" => array());
}

$errors = $validator->errors()->getMessages(); getMessages(); function will give you all error message with key of your input name. By using that input name key you can print particular error message under the input.

index.blade.php

        <div class="form-group m-form__group">
            <label>
                Name<span class="text text-danger">*</span>
            </label>
            <input type="text" class="form-control m-input" name="name"  placeholder="Enter user name" @if(isset($data)) value="{{$data->name}}"  @endif />
            <span class="error_msg" id="error_name"></span>
        </div>

        <div class="form-group m-form__group">
            <label>
                Email<span class="text text-danger">*</span>
            </label>
            <input type="email" class="form-control m-input" name="email" placeholder="Enter email" @if(isset($data)) value="{{$data->email}}"  @endif />
            <span class="error_msg" id="error_email"></span>
        </div>

Your custom.js file

$.ajax({
                type: "POST",
                url: url,
                data: fdata,
                headers: {
                    'X_CSRF_TOKEN': '{{ csrf_token() }}',
                },
                contentType: false,
                processData: false,
                "success":function (data) {

                    var message = data.msg;

                    jQuery.each(message, function(key, value){
                        jQuery('#error_'+key).html(value[0]);
                    });
                   },

                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Something went wrong. Please try again.");
                    //unload();
                }
            });