Laravel AJAX Validation Request Example

This is an article based on the example of writing a web-based application powered by Laravel Framework. This is article presenting an example of submitting a form through AJAX request to perform a validation which is done by Laravel framework so that it can be checked before whether or not the data or information submitted is true or false. The data or information will be weighed whether it is true or false by using the judgement of Laravel framework. So, an article written with the title of ‘Laravel AJAX Validation Request Example’ can be stated as the following scenario :

A blade view file template is made to display the input form which is going to be used by user. Every input will be validated before it can actually be saved. But in the context of this article, the process will be stop only when the data or information has already been declared as true by Laravel framework validation. The process of submitting the data or information will be done or executed from an AJAX Request.

There will be a returned value based on the validation which has been defined in the Laravel Controller file specifically in one of its method. So, if there is an error, it must be received properly and then print it into a form of suitable error message.

Below is the blade view file template example describing the input form needed by user to input necessary data or information which is given solely for an example :

<form id="general_form" class="form-horizontal" method="POST">
    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
    <input type="hidden" name="general_button" value="false" />
    <div class="form-group">
      <label class="col-xs-2 control-label">First Name : </label>
        <div class="col-xs-5">
          <input type="text" class="form-control" name="first_name" />
        </div>
        <label class="text-danger" id="nm"></label>
       </div>
    <div class="form-group">
      <label class="col-xs-2 control-label">Last Name : </label>
        <div class="col-xs-5">
          <input type="text" class="form-control" name="last_name" />
        </div>
        <label class="text-danger" id="lm"></label>
    </div>
    <div class="form-group">
        <div class="col-xs-5  col-xs-offset-2">
           <button type="submit" class="btn btn-default simpan" name="submitGeneralButton" value="Submit" >Submit</button>
        </div>
    </div>
</form>

In the above script, there are two fields of input text for an example. The first one is for inserting the first name and the second is for inserting the last name. These two will be validated with Laravel Validation utility by checking whether or not the entry is empty or not.

The validation is given within the controller file as shown below :

    public function saveFormGeneral(Request $request) {
        $validator = $this->validate($request, [
            'first_name' => 'required',
            'last_name' => 'required',
                ], [
            'first_name.required' => 'First Name cannot be empty',
            'last_name.required' => 'Last Name cannot be empty',
        ]);
        ...

After submitting the request from the form defined in blade view template, if there is an error on the validation process provided in the controller file shown above such as the first name input type field is deliberately not inserted. It will generate an error called ‘422 Unprocessable Entity’. This error is an error which is probably not printed as in the Laravel based framework web application but on the other hand it is a common error which is generally accepted because of a validation error.

To make the error can be processed and then to be displayed in the page, it need to be defined in the AJAX script further as shown below :

$.ajax({
    url: "{{url('/test/save_form_general')}}",
            ...
            },
            error: function(data){
            $('#nm').text(data.responseJSON.first_name);
            console.log($("#nm").text());
            }
    });

Where the error will be printed in the span element which has the identifier of ‘nm’. It is shown as follows :