How to display validation errors of AJAX requests?

Like it says, you get an error (422) response with a JSON payload having the validation errors

If you're using jQuery:

   $.ajax(url, {
      success: function(data) {
         // handle the successful response
      },
      error: function(xhr, status, error) {
    // handle the error
     }
   });

What about Axios?

I do it like this currently (using notify.js):

 error: function (response) {

                if (response.status ==422){
                    displayFieldErrors(response);
                }else{

/**
 * Uses Notify.js to display validation errors
 * next to the relevant field
 * @param response
 */
function displayFieldErrors(response){

    var gotErrors = false;

    var errorPostion = "top";

    $.each(response.responseJSON, function (key, item) {
        //key is the field
        $gotErrors = true;
        $("#" + key).notify(item, {position: errorPostion});

        if (errorPostion === "top") {
            errorPostion = "bottom";
        } else {
            errorPostion = "top";
        }
    });

    return gotErrors;

@mottoskorzeny Try this to see some options:

axios
  .post(form.action, data)
  ...
  .catch((failure) => {
    console.dir(failure);
  });

You'll see you get access to the validation errors in failure.response.data.

@curtisblackwell thank you for your response. I also wonder if is it possible to set a global handler for any axios request. For example I want to listen every ajax requests globally and if any of them returns with an "not authenticated" error, I want to redirect user to login page...

@mottoskorzeny I've not done so myself, but it sounds like interceptors would make that simple to implement. You might want to set the interceptor(s) on a customized instance of axios.

…oh wow. Just saw how long ago this is from. Only now noticed a notification.

Thanks, was hunting down this solution for few days now.