If an ajax request don't pass a form request validation, errors will be returned as json. You can catch them in the error callback of jquery ajax method :

    $.ajax({
      type: 'post',
      url: url,
      data: data,
      dataType: 'json',
      success: function(data){
        // success logic
      }),
      error: function(data){
        var errors = data.responseJSON;
        console.log(errors);
        // Render the errors with js ...
      }
    });

If you are posting a form using jQuery ajax you can use the error handler to grab the error data e.g:

...
....
error :function( jqXhr ) {
        if( jqXhr.status === 401 ) //redirect if not authenticated user.
            $( location ).prop( 'pathname', 'auth/login' );
        if( jqXhr.status === 422 ) {
        //process validation errors here.
        $errors = jqXhr.responseJSON; //this will get the errors response data.
        //show them somewhere in the markup
        //e.g
        errorsHtml = '<div class="alert alert-danger"><ul>';

        $.each( data, function( key, value ) {
            errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error.
        });
        errorsHtml += '</ul></di>';
            
        $( '#form-errors' ).html( errorsHtml ); //appending to a <div id="form-errors"></div> inside form
        } else {
            /// do some thing else
        }
    }
....

Usman.

@usman I am pretty sure there is a problem on that code... Where does this data come from in the$.each function?

@Ozan just a typo, it would be $errors instead of data

@rashidul0405 well it still doesn't work because in my case $errors is always undefined.

error :function( jqXhr ) {
        if( jqXhr.status === 401 ) //redirect if not authenticated user.
            $( location ).prop( 'pathname', 'auth/login' );
        if( jqXhr.status === 422 ) {
        //process validation errors here.
        var errors = jqXhr.responseJSON; //this will get the errors response data.
        //show them somewhere in the markup
        //e.g
        errorsHtml = '<div class="alert alert-danger"><ul>';

        $.each( errors , function( key, value ) {
            errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error.
        });
        errorsHtml += '</ul></di>';
            
        $( '#form-errors' ).html( errorsHtml ); //appending to a <div id="form-errors"></div> inside form
        } else {
            /// do some thing else
        }
    }

This is my code using toastr notifications:

var form = $("#editForm");

    $.ajax({
        url     : form.attr("action"),
        type    : form.attr("method"),
        data    : form.serialize(),
        dataType: "json",
        success : function ( json ) 
        {
            toastr.success( json.message , "Notifications" );
        },
        error   : function ( jqXhr, json, errorThrown ) 
        {
            var errors = jqXhr.responseJSON;
            var errorsHtml= '';
            $.each( errors, function( key, value ) {
                errorsHtml += '<li>' + value[0] + '</li>'; 
            });
            toastr.error( errorsHtml , "Error " + jqXhr.status +': '+ errorThrown);
        }
    })
    .done(function(response)
    {
        //
    })
    .fail(function( jqXHR, json ) 
    {
        //
    });
    return false;

//controller method

        $validation = \Illuminate\Support\Facades\Validator::make($request->only('start_date', 'end_date'),    $rules);

    if($validation->passes())

    {
        $update                   = Lecturer::find($id);
        $update->status           = $request->get('status');
        $update->start_date       = $request->get('start_date');
        $update->end_date         = $request->get('end_date');
        if($update->save()) {

        return response()->json([
                'success' => true,
                'message' => 'record updated'
            ], 200);

        }
    }
    $errors = $validation->errors();
    $errors =  json_decode($errors); 

    return response()->json([
        'success' => false,
        'message' => $errors
    ], 422);

// view

                   $.ajax({
                    url: URL,
                    type: 'PUT',
                    data: formdata,
                    success: function (response) {
                    window.location = "{{ URL::route('campaign.index')}}";
                      },

                    error: function(xhr,status, response) {
                        var error = jQuery.parseJSON(xhr.responseText);  // this section is key player in getting the value of the errors from controller.
                        var info = $('.edit_alert');
                        info.hide().find('ul').empty();
                            for(var k in error.message){
                                if(error.message.hasOwnProperty(k)){
                                    error.message[k].forEach(function(val){
                                        info.find('ul').append('<li>' + val + '</li>');
                                    });

                                }
                            }

                           info.slideDown();


                }

                });

I just did this an works

            error: function(data)
            {
                var errors = '';
                for(datos in data.responseJSON){
                    errors += data.responseJSON[datos] + '<br>';
                }
                $('#response').show().html(errors); //this is my div with messages
            }

So, when the request fails, the error method prints the messages from Laravel Validation system on my div .

Btw sorry for my english :D