Laravel 5.8 jQuery Ajax Form Submit With Validation

In this tutorial you will learn about the Laravel 5.8 jQuery Ajax Form Submit With Validation and its application with practical example.

Laravel 5.8 jQuery Ajax Form Submit With Validation

What Is Input Validation?

Input validation is a process where we check whether the input data provided by user or client is in correct format or not. If the input data fails to satisfy the validation rules then the user is responded with an error response code and the user is requested to resubmit the form with correct information. Generally Form validation is performed at server side, but can be performed at both the server and client side.

We will be using Jquery Form Validation plugin to validate the form in the client side, then input data is submitted to server where it will be validated against the server side validation rules.When the form data satisfies the validation at both the client and server side it will be inserted into the database.

Laravel Ajax Form Submit

In this Laravel jQuery Ajax Form Submit tutorial you’ll learn to validate and submit form data without reloading or refreshing of page using ajax. In this tutorial I’ll show you step by step how to submit a form without reloading or refreshing of page using ajax. In this example we will be using jquery form validation along with the jquery ajax submit handler for ajax form submission.

In this Laravel jQuery Ajax Form Submit example, I’ll show you how easily we can implement laravel validation with jquery ajax form submit request and can display laravel validation errors messages. In order to submit form data using ajax, we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request.

Before starting with example I assume that you already have fresh laravel 5.8 installation ready, if you have it installed then you can skip this step.

Create Laravel 5.8 Application

First of all we need to create a fresh laravel project, download and install Laravel 5.8 using the below command

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

Generate Application Key

Open terminal and switch to the project directory and run the following command to generate application key and configure cache.

Set Default String Length

Locate the file “app/Providers/AppServiceProvider”, and add following line of code to the top of the file

and inside the boot method set a default string length as given below –

So this is how “app/Providers/AppServiceProvider” file looks like –

Create Model and Migration

Now, we have to define table schema for contact table. Open terminal and let’s run the following command to generate a Contact model along with a migration file to create contact table in our database.

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file created and put following code in it –

Recommended:-  Run Laravel Project on Different Port

Run Laravel Migration

Now, run following command to migrate database schema.

After, the migration executed successfully the contact table will be created in database.

Create Laravel Controller

Next, we have to create a controller to display contact form and to handle form validation and submit operations. Lets Create a controller named ContactController using command given below –

Once the above command executed, it will create a controller file ContactController.php in app/Http/Controllers/ajaxFormSubmitValidation directory.

Open the ajaxFormSubmitValidation/ContactController.php file and put the following code in it.

app/Http/Controllers/ajaxFormSubmitValidation/ContactController.php

In this controller, we have following methods –

index() :- To display contact form.

store() :- To validate and submit form data,

Create Laravel View Files

In this step, we will create laravel view/blade file to perform display contact form. Lets create a blade file “contact_form.blade.php” in “resources/views/ajaxFormSubmitValidation/” directory and put the following code in it respectively.

resources/views/ajaxFormSubmitValidation/contact_form.blade.php

Add CSRF Meta and Set Ajax Headers

Laravel comes with a security mechanism called csrf token. In Laravel, each of the request is attached a csrf_token that is validated before can be processed. In order to submit form data using ajax, we must have to incorporate csrf token with form data and set X-CSRF-TOKEN request header with ajax form submit request. This CSRF Token can generated using csrf_token() helper of laravel 5.

Recommended:-  Laravel 5.8 Google ReCAPTCHA Integration

Add CSRF Token In Meta tag :-

Set CSRF Token In jQuery Ajax Header :-

Define Laravel Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

Now, open the following URL in browser to see the output –

http://localhost:8000/jquery-ajax-form-submit-validation

Output 1:-

laravel-5-8-jquery-ajax-form-submit-with-validation-1

Output 2:-

Validate form data and display error messages.

laravel-5-8-jquery-ajax-form-submit-with-validation-2

Output 3:-

Form data submitted successfully.

laravel-5-8-jquery-ajax-form-submit-with-validation-3

In this tutorial we have learn about the Laravel 5.8 jQuery Ajax Form Submit With Validation and its application with practical example. I hope you will like this tutorial.