Laravel Ajax Response And Handling Errors

Question

Here is a part of my html file.

<div class="form-group{{ $errors->has('address_name') ? ' has-error' : '' }}">
    <label for="address_name">{{ trans('address.address_name') }} <span class="required_field">*</span></label>
    <input name="address_name" type="text" class="form-control" id="address_name" placeholder="{{ trans('address.address_name_placeholder') }}" maxlength="30">
    @if($errors->has('address_name'))
        <span class="help-block">{{ $errors->first('address_name') }}</span>
    @endif
</div>

I need to handle errors with Ajax Request in Laravel 5.1. Here is my code for handling

$validator = Validator::make($addressData, $this->rules());

    if ($validator->fails())
    {
        return response()->json([
            'success' => 'false',
            'errors'  => $validator->errors()->all(),
        ], 400);
    }
    else
    {
        //Save Address
        try
        {
            $this->insertAddress($addressData);
            return response()->json(['success' => true], 200);
        }
        catch(Exception $e)
        {
            return response()->json([
                'success' => 'false',
                'errors'  => $e->getMessage(),
            ], 400);
        }

    }

Console Message

{"success":"false","errors":["The Address Name field is required.","The Recipient field is required.","The Address field is required."]}

I can see errors in console but. In Blade i cannot reach $errors. How can i fix the problem ?

Dhruv Raval · Accepted Answer · 2019-05-04 05:48:15Z

7

You are probably trying to work on different levels. Assuming that you are not handling the error response in your ajax script, there's no way for blade to know the error response, since the html page is provided by the controller as-is and it won't change until the next refresh. If you want to let blade know the response, you need to catch it asynchronously, that is ajax level.
Assuming again you are POSTing with a standard ajax request, you could do something like:

    var form = $('#your-form-id');
        $.ajax({
            url: form.attr( 'action' ),
            type: 'POST',
            data: form.serialize(),
            success: function(data){
                // Successful POST
                // do whatever you want
            },
            error: function(data){
                // Something went wrong
                // HERE you can handle asynchronously the response 

                // Log in the console
                var errors = data.responseJSON;
                console.log(errors);

                // or, what you are trying to achieve
                // render the response via js, pushing the error in your 
                // blade page
                 errorsHtml = '<div class="alert alert-danger"><ul>';

                 $.each( errors.error, function( key, value ) {
                      errorsHtml += '<li>'+ value[0] + '</li>'; //showing only the first error.
                 });
                 errorsHtml += '</ul></div>';

                 $( '#form-errors' ).html( errorsHtml ); //appending to a <div id="form-errors"></div> inside form  
                });
            }
        });

Note that you will need a #form-errors div inside your posting form for this to work.

edited May 4, 2019 at 5:48

Dhruv Raval

1,5831 gold badge10 silver badges18 bronze badges

answered Oct 25, 2015 at 21:22

MisterP

4671 gold badge4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cihan Küsmez Over a year ago

'<li>'+ value[0] + '</li>'; why did you like that ? we need value[key] i think

MisterP Over a year ago

@CihanKüsmez yea, key if you got more than one error. I did specify that it shows only one error and I believe that's up to your very needs.

Sinan Eldem Over a year ago

$.each( data, function( key, value ) { should be $.each( errors.errors, function( key, value ) {

itsmed · Accepted Answer · 2018-10-15 15:03:46Z

Hope that will help you

        $.ajax({
            url: form.attr( 'action' ),
            type: 'POST',
            data: form.serialize(),
            success: function(data){
                // do whatever you want
            },
            error: function(data){

                // Log in the console
                var errors = data.responseJSON;
                console.log(errors);

                // or, what you are trying to achieve
                // render the response via js, pushing the error in your 
                // blade page

                    var errors = response.responseJSON;
                   errorsHtml = '<div class="alert alert-danger"><ul>';
                  $.each(errors.errors,function (k,v) {
                         errorsHtml += '<li>'+ v + '</li>';
                  });
                  errorsHtml += '</ul></di>';

                  $( '#error_message' ).html( errorsHtml );

                   //appending to a <div id="error_message"></div> inside your form  
                });
            }
        });

Ali Raza · Accepted Answer · 2020-09-29 12:07:45Z

0

Here is more concise solution. Happy hacking :)

   .fail((err) => {     
    let allErrors = Object.values(err.responseJSON)
    .map(el => (
      el = `<li>${el}</li>`
    ))
    .reduce((next, prev) => ( next = prev + next ));   
    const setErrors = `
      <div class="alert alert-danger" role="alert">
          <ul>${allErrors}</ul>
      </div>
    `;
    $('.modalErrorr').html(setErrors);

  })       
  .always((data) => {
    
  });

answered Sep 29, 2020 at 12:07

Ali Raza

1921 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

Laravel Ajax Response And Handling Errors

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related