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

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:

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

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.

Routes

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.