In this post, we will know first of all Jquery. Jquery is more popular and mostly used in a web application like animation, slide, fade effect and etc. So, we will use Jquery in the Laravel application. If you are thinking about to create form validation using jquery in your Laravel application then this post for you. In this tutorial, we will know how to create Jquery form validation using jquery.
Here we are following just a few steps and create Jquery form validation for your Laravel application.
Here we require to create Route, Controller, and blade file.
So just follow the below three-step and you will get it.
Step 1 : Add Route in web.php file
Now, open your web.php file and create two routes in this file.
routes/web.php
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('form',['as' => 'form','uses' => 'UserController@formValidation']);
Route::post('validation/form',['as' => 'form.validation','uses' => 'UserController@validationPost']);
Step 2 : Create UserController
Here, we need to create UserController file for your jquery form validation.So, let's run quick command to create controller follw below command.
php artisan make:controller UserController
After make a controller we are copy below code and put on UserController file.
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function formValidation()
{
return view('form');
}
public function validationPost(Request $request)
{
// write Code here on your submit action
}
}
Step 3 : Create Blade file.
In this step we need to create blade file and create a form like below.
resources/views/form.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laravel JQuery Form Validation Example - webappfix.com</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Laravel JQuery Form Validation Example - webappfix.com</h2>
<br/>
<form method="post" action="{{ route('form.validation') }}" id="form">
@csrf
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="name">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Email">Email:</label>
<input type="text" class="form-control" name="email">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Number">Phone Number:</label>
<input type="text" class="form-control" name="number">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Min Length">Min Length(minium 5):</label>
<input type="text" class="form-control" name="minlength">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Max Length">Max Length(maximum 8):</label>
<input type="text" class="form-control" name="maxlength">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Min Value">Min Value(minium 1):</label>
<input type="text" class="form-control" name="minvalue">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Max Value">Max Value(maximum value 100):</label>
<input type="text" class="form-control" name="maxvalue">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Range">Range(minium 20, maximum 40):</label>
<input type="text" class="form-control" name="range">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<label for="Range">URL:</label>
<input type="text" class="form-control" name="url">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4">
<input type="file" name="filename">
</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="form-group col-md-4" style="margin-top:60px">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
<script src = "https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src = "https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"> </script>
<script>
$(document).ready(function() {
$('#form').validate({ // initialize the plugin
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
number: {
required: true,
digits: true
},
minlength: {
required: true,
minlength: 5
},
maxlength: {
required: true,
maxlength: 8
},
minvalue: {
required: true,
min: 1
},
maxvalue: {
required: true,
max: 100
},
range: {
required: true,
range: [20, 40]
},
url: {
required: true,
url: true
},
filename: {
required: true,
extension: "jpeg|png"
},
}
});
});
</script>
</body>
</html>
Now we are ready to run this example. So, run and check it.
I hope you like this post.
Thanks...
We always thanks to you for reading our blogs.
Dharmesh Chauhan
(Swapinfoway Founder)Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us
Haresh Chauhan
(Co-Founder)We Are Also Recommending You :
- Laravel Country State City Dropdown Using AJAX
- Uncaught ReferenceError: $ is not defined jQuery - Javascript
- Skeleton Screen Loading Effect
- How to get Current Date and Time in AngularJS?
- How to install vue js project ?
- Matching text highlight on search using html and js
- Keep array input value from localstorage on page refresh
- Select2 ajax example
- Send WhatsApp Messages Using Chat API In jQuery - Ajax
- How To Use Props In Vue.js