In todays, jquery is a more popular and mostly use in every web application. same as for laravel. So if you are planing to create form validation using jquery in your laravel application then you are a right place. Yes, in this tutorial i will let you know how to create jquery form vvalidation using jquery.validate plugin in your laravel 5.6 application.
So, you have to just follow few step and you will learn how to use jquery form validation in laravel project. we will create route, controller and blade file. So just follow below three step and you will get it.
Step 1: Create Routes in web.php File
Route::get('validation','FormController@validation');
Route::post('validation','FormController@validationPost');
Step 2: Create FormController File
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FormController extends Controller
{
public function validation()
{
return view('validation');
}
public function validationPost(Request $request)
{
// Here you can write code of store data....
}
}
Step 3: Create vaidation.blade.php File
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laravel JQuery Form Validation Example - HDTuto.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 - HDTuto.com</h2><br/>
<form method="post" action="{{url('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 you can run and check it....
I hope you can find your solution....
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example