How to submit a form using Ajax with form validation in Laravel

You can submit a form using Ajax in Laravel. This is required when you do not want to refresh the whole page, instead you want to use a small part of the entire page to submit a form without disturbing the other elements on the page.

In this topic, we will create a Laravel project to submit a form using Ajax. It will send form data using Ajax and also do the Laravel form validation. Basically, it will submit the form without page refresh.

This small Laravel application will display a list of submitted user applications, you can add new application using a form. Form will be submitted using Ajax along with Laravel form validation.

Step1 - Create a Laravel project

Let us create a project in Laravel. Make sure you have composer and PHP installed in your system. I have given the project name as ajax_form.

Step 2 - Create MySQL tables and migrate

Let us create a Laravel migration for the table named 'applications'. This table will store the details of each applications submitted. Go to your project folder and run below command to create model, controller and migration.

Above command will create the model, controller and the migration file. I am using VS code and three files are marked below:

Submit form using Ajax in Laravel

Update .env file for database details. I am using MySQL database named 'lara_demo', so I updated the file as below:

Migration for the custom table

Update the migration file for the 'applications' table as below:

So, our custom table will have name, email and address fields which will be populated by our ajax form submission.

Let us now run the migration using php artisan migrate to create the default Laravel tables and our custom table. Run below command from project folder to create the tables.

This will create all the default Laravel tables as well as our custom 'applications' table.

Below is the model:


Step 3 - Create Laravel form and submit using Ajax

We will create two views, one for listing of all applications and other for adding new application.

I have below files in the resources/views folder

Submit form using Ajax in Laravel

header, footer and master are three layouts. application.blade.php is the form to submit new application and index.php is for the listing of all applications.





In above code, we have a simple form with submit and cancel button. Then a Modal is defined to display the success message. Let us see the Ajax scripts for the form submission.

Before running ajax script, I am removing the existing error messages. Then using FormData() instance I am submitting the form. So, it will send form data using ajax. If the submission is successful, I am displaying the modal. If there is any validation error, it loops through the errors for each form input and adds a span element to display the error message corresponding to the input field.

Below is the view for the listing of applications.



We have three routes, for listing, displaying the form and the last one for form submission.

Step 4 - Write Controller code


Check the store() method, here. Validations are done for name and email fields, if validation fails, it returns response with validator errors. If validation is successful, success messaage is returned.

I am using some styles and the stylesheet is given below:


Step 5 - Test the application

From the project root, run the php development server:

From browser run localhost:8000. Test all the validations and successful submission.

Hope it will be useful for you.

download code for submit form using Ajax in Laravel Download code from github.

Development Steps for Ajax form submission in LaravelWatch YouTube Video