Laravel 7/6 jQuery Form Validation Example

In this tutorial you will learn about the Laravel 7/6 jQuery Form Validation Example and its application with practical example.

In this Laravel 7/6 jQuery Form Validation Example I will show you how to apply client side form validation using jquery form validation plugin. In this tutorial you will learn to apply client side form validation using jquery form validation plugin in laravel.

Table Of Contents−

Laravel 7/6 jQuery Form Validation Example

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.

In this simple example, I’ll show you how to implement client side validation in laravel using Jquery Form Validation plugin. In this tutorial, you will learn to validate the form data in the client side before it is submitted to server. When the form data satisfies the validation it will submitted to server for further processing.

Step 1: Install Laravel Fresh Setup

Step 2: Setup Database
Step 3: Make Migration file with Model
Step 4: Make Route

Step 5: Create Controller & Methods
Step 6: Create Blade View
Step 7: Start Development Server

Step 1: Install Laravel Fresh Setup

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

composer create-project --prefer-dist laravel/laravel Blog

1	composer create-project --prefer-dist laravel/laravel Blog

Step 2: Setup Database

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.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Make Migration file with Model

Now, in this step we will create model and migration file. Please run the following command:

 php artisan model Contact -m

1	php artisan model Contact -m

Now go to Go to app/database/create_contacts_table.php and replace the below function :

public function up()
 {
     Schema::create('contacts', function (Blueprint $table) {
         $table->bigIncrements('id');
         $table->string('name');
         $table->string('email');
         $table->text('message');
         $table->timestamps();
     });
 }

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->text('message');

$table->timestamps();

});

}

Before we run php artisan migrate command go to app/providers/AppServiceProvider.php and put the below code :

..
use Illuminate\Support\Facades\Schema;
  
....
function boot()
{
    Schema::defaultStringLength(191);
}
...

use Illuminate\Support\Facades\Schema;

....

function boot()

{

Schema::defaultStringLength(191);

}

...

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Now go to app/Contact.php file and add the fillable properties like this :

protected $fillable = [ 'name', 'email', 'message', ];

1	protected $fillable = [ 'name', 'email', 'message', ];

Step 4: Make 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

Route::get('form-jquery', 'ContactController@index');
 Route::post('store', 'ContactController@store');

1 2	Route::get('form-jquery', 'ContactController@index'); Route::post('store', 'ContactController@store');

Step 5: Create Controller

Now, lets create a controller named ContactController using command given below –

php artisan make:controller ContactController

1	php artisan make:controller ContactController

After successfully create controller go to app/controllers/ContactController.php and put the below code :

<?php
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Contact;
 
class ContactController extends Controller
{
 
    public function index()
    {
      return view('contact');
    }
 
    public function store(Request $request)
    {
        $data = request()->validate([
        'name' => 'required',
        'email' => 'required|email',
        'message' => 'required'
        ]);
        
        $check = Contact::create($data);
        return Redirect::to("form")->withSuccess('Great! Form successfully submit with validation.');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response;

use App\Contact;

class ContactController extends Controller

{

public function index()

{

return view('contact');

}

public function store(Request $request)

{

$data = request()->validate([

'name' => 'required',

'email' => 'required|email',

'message' => 'required'

]);

$check = Contact::create($data);

return Redirect::to("form")->withSuccess('Great! Form successfully submit with validation.');

}

Step 6: Create Blade view

In this step, we will create a blade file. Go to app/resources/views and create one file name contact.blade.php.

<html>
<head>
<title>Laravel Jquery Form Validation From Scratch</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
</head>
<style type="text/css">
body{
background-color: #25274d;
}
.contact{
padding: 4%;
height: 400px;
}
.col-md-3{
background: #ff9b00;
padding: 4%;
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.contact-info{
margin-top:10%;
}
.contact-info img{
margin-bottom: 15%;
}
.contact-info h2{
margin-bottom: 10%;
}
.col-md-9{
background: #fff;
padding: 3%;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.contact-form label{
font-weight:600;
}
.contact-form button{
background: #25274d;
color: #fff;
font-weight: 600;
width: 25%;
}
.contact-form button:focus{
box-shadow:none;
}
</style>
<body>
<div class="container contact">
<br><br><br>
<div class="row">
<div class="col-md-3">
<div class="contact-info">
<img src="{{ url('public/images/1553741491contact-image.png') }}" alt="image"/>
<h2>Contact Us</h2>
<h4>We would love to hear from you !</h4>
</div>
</div>
<div class="col-md-9">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
<br>
@endif
<form action="{{ url('store') }}" method="post" accept-charset="utf-8" id="contact_form">
@csrf
<div class="contact-form">
<div class="form-group">
<label class="control-label col-sm-2" for="fname">First Name:</label>
<div class="col-sm-10">          
<input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
<span class="text-danger">{{ $errors->first('name') }}</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<span class="text-danger">{{ $errors->first('email') }}</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Comment:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" name="message" id="message"></textarea>
<span class="text-danger">{{ $errors->first('message') }}</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
<br><br><br><br>
</div>
</body>
<script>
if ($("#contact_form").length > 0) {
$("#contact_form").validate({
rules: {
name: {
required: true,
maxlength: 50
},
email: {
required: true,
maxlength: 50,
email: true,
},
message: {
required: true,
minlength: 50,
maxlength: 500,
},
},
messages: {
name: {
required: "Please enter name",
},
message: {
required: "Please enter message",
},
email: {
required: "Please enter valid email",
email: "Please enter valid email",
maxlength: "The email name should less than or equal to 50 characters",
},
},
})
} 
</script>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<html>

<head>

<title>Laravel Jquery Form Validation From Scratch</title>

</head>

body{

background-color: #25274d;

}

.contact{

padding: 4%;

height: 400px;

}

.col-md-3{

background: #ff9b00;

padding: 4%;

border-top-left-radius: 0.5rem;

border-bottom-left-radius: 0.5rem;

}

.contact-info{

margin-top:10%;

}

.contact-info img{

margin-bottom: 15%;

}

.contact-info h2{

margin-bottom: 10%;

}

.col-md-9{

background: #fff;

padding: 3%;

border-top-right-radius: 0.5rem;

border-bottom-right-radius: 0.5rem;

}

.contact-form label{

font-weight:600;

}

.contact-form button{

background: #25274d;

color: #fff;

font-weight: 600;

width: 25%;

}

.contact-form button:focus{

box-shadow:none;

}

</style>

<body>

<h2>Contact Us</h2>

<h4>We would love to hear from you !</h4>

</div>

@if ($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

<br>

@endif

@csrf

<label class="control-label col-sm-2" for="fname">First Name:</label>

<span class="text-danger">{{ $errors->first('name') }}</span>

</div>

<label class="control-label col-sm-2" for="email">Email:</label>

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>

<label class="control-label col-sm-2" for="comment">Comment:</label>

<span class="text-danger">{{ $errors->first('message') }}</span>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

</div>

</div>

</body>

if ($("#contact_form").length > 0) {

$("#contact_form").validate({

rules: {

name: {

required: true,

maxlength: 50

email: {

required: true,

maxlength: 50,

email: true,

message: {

required: true,

minlength: 50,

maxlength: 500,

messages: {

name: {

required: "Please enter name",

message: {

required: "Please enter message",

email: {

required: "Please enter valid email",

email: "Please enter valid email",

maxlength: "The email name should less than or equal to 50 characters",

})

}

</script>

</html>

Step 7: Run Development Server

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

php artisan serve

1	php artisan serve

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

 http://localhost:8000/form-jquery

1	http://localhost:8000/form-jquery

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7/6 jQuery Form Validation Example