How to show Laravel validation errors when using ajax request to submit form?

Whenever a user submits a form to the server. we need to check whether the form data that the user has submitted is in a correct format or not. Also, we want to help him/her in filling out the form in a correct format. Which can be done by showing appropriate messages about the mistakes that the user has committed.

However, Laravel already provides the functionality to check the form data and then return error messages. Using Laravel built-in form validations. We can easily check if the data filled in the form is correct or not.

Well, that’s the beauty of Laravel. But there isn’t an easy method provided by Laravel to show these servers errors to the user.  Therefore I have created a JQuery plugin that will take care of submitting form data and showing validation errors in the form. I have named it AjaxEasy. Now let’s see how to use it.

Include the required files to use the AjaxEasy plugin

The AjaxEasy plugin relies on JQuery. Therefore just below the JQuery, include the ajax-easy.js file. Now add “ajax-easy” class to the form element. Now, copy and paste the following code anywhere below the ajax-easy.js file.

You can customize the “loading_txt” parameter to change the text shown in the form submit button while processing the ajax request.

That’s it, your form will now be submitted with an ajax request. Also, the form will be submitted to the URL specified in the action attribute of the form element with the method specified in the method attribute of the form element.

Let me know if you have any problem by leaving a comment.

 

7 comments on “How to show Laravel validation errors when using ajax request to submit form?

    1. Amarjit Singh Post author

      you can use it with CodeIgniter but you have to send validation errors in JSON string with the same format as Laravel does.

      Reply
        1. Amarjit Singh Post author

          Laravel sends a JSON array. for example:
          echo json_encode([
          'field1' => ['error1', 'error2'],
          'field2' => ['error1', 'error2']
          ]);

          Reply
    1. Amarjit Singh Post author

      You mean “laravelcollective/html”. If yes then Let me clear you that this plugin doesn’t do anything on the server side. It’s just a JavaScript plugin that automatically makes a form to be submitted with ajax and show the errors returned by Laravel in the form. ie: you won’t be required to write code to make an ajax request and render validation errors in the form.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *