Laravel ajax 422 Unprocessable Entity even when token is matching

Question

I\'m getting 422 Unprocessable Entity error even when I\'m submitting my form via Ajax.

My javascript file

$.ajaxSetup({
    headers         


        

Answer 1

I don't think that csrf token is the issue here. If it were you would get TokenMissmatchException and not Unprocessable Entity. Do you happen to have a request validator in your Controller like this?

    $validator = Validator::make($request->all(), [

            'username' => 'required|max:30|min:6|unique:users',

            'email' => 'required|email|max:50|unique:users',

            'password' => 'required|confirmed|min:6',

        ]);

If so maybe you can do something like this:

    if ($validator->fails()) {

            if($request->ajax())
            {
                return response()->json(array(
                    'success' => false,
                    'message' => 'There are incorect values in the form!',
                    'errors' => $validator->getMessageBag()->toArray()
                ), 422);
            }

            $this->throwValidationException(

                $request, $validator

            );

        }

After that you can catch validation errors in your ajax error handler like this:

  $('.keywords-plan-form').submit(function(event) {
       event.preventDefault();

$.ajax({
    url: '/laravel/public/keywordsplans',
    type: 'POST',
    data: $(this).serialize(),
    success: function(data){
        alert(data);
        // success logic
    },
    error: function(jqXhr, json, errorThrown){// this are default for ajax errors 
        var errors = jqXhr.responseJSON;
        var errorsHtml = '';
        $.each(errors['errors'], function (index, value) {
            errorsHtml += '<ul class="list-group"><li class="list-group-item alert alert-danger">' + value + '</li></ul>';
        });
        //I use SweetAlert2 for this
        swal({
            title: "Error " + jqXhr.status + ': ' + errorThrown,// this will output "Error 422: Unprocessable Entity"
            html: errorsHtml,
            width: 'auto',
            confirmButtonText: 'Try again',
            cancelButtonText: 'Cancel',
            confirmButtonClass: 'btn',
            cancelButtonClass: 'cancel-class',
            showCancelButton: true,
            closeOnConfirm: true,
            closeOnCancel: true,
            type: 'error'
        }, function(isConfirm) {
            if (isConfirm) {
                 $('#openModal').click();//this is when the form is in a modal
            }
        });

    }
});
});

And see the messages in the modal message

Answer 2

Maybe someone will come in handy.

422 Unprocessable Entity

is default error by validator laravel

vendor/laravel/framework/src/Illuminate/Validation/Validator.php

If fails validate params, then throught Exception ValidationException

vendor/laravel/framework/src/Illuminate/Validation/ValidationException.php

where default status = 422

And therethore all your ajax responses with non validate forms will be with status = 422

Answer 3

I have solved this issue :

public function register(\Illuminate\Http\Request $request) {        
    if ($this->validator($request->all())->fails()) {
        $errors = $this->validator($request->all())->errors()->getMessages();            
        $clientErrors = array();
        foreach ($errors as $key => $value) {
            $clientErrors[$key] = $value[0];
        }
        $response = array(
            'status' => 'error',
            'response_code' => 201,
            'errors' => $clientErrors
        );            
    } else {
        $this->validator($request->all())->validate();
        $user = $this->create($request->all());
        $response = array(
            'status' => 'success',
            'response_code' => 200
        );
    }
    echo json_encode($response);
}

Answer 4

Whoever is still looking for the answer, if you are using Lumen make sure the Request object is a type of Illuminate\Http\Request and not the default one from Lumen.

```function create(Request $request){