There are two types of form validation that exist on the web. One is the client side and the other is the server side. There are also many packages to validate forms on the client side in web applications. In this tutorial, we will see how we can validate forms in Laravel using jQuery.
In this jquery form validation in Laravel 9 tutorials, we will create our own validation rules using jQuery plugins. When a user submits invalid data, we will show him an instant error message without sending the request to the server using jQuery form validation. And if the form data is valid, then the user can able to submit this form without facing the error message.
So let's see the jquery validation form before submitting the tutorial preview below:
Step 1: Download Fresh Laravel
In this first step, we need a fresh Laravel 9 application for jquery validation on form submit laravel. So download it by the below command:
composer create-project laravel/laravel example-app
Step 2: Create Route
Now in this step, we will create two routes, one is for seeing the web form view and other is for submitting the form.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TutorialController;
/*
|--------------------------------------------------------------------------
| 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('user', [TutorialController::class, 'index'])->name('user.index');
Route::post('user', [TutorialController::class, 'store'])->name('user.store');
Step 3: Create Controller
Now in this step, we have to create a TutorialController to define this method to create those two methods.
php artisan make:controller TutorialController
Now update the controller like the below:
app/Http/Controllers/TutorialController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class TutorialController extends Controller
{
public function index()
{
return view('welcome');
}
public function store(Request $request)
{
return $request;
}
}
Step 4: Create Views
We are almost there. Just we have to create two views files before completingjquery form validation on submit.
- welcome.balde.php
- app.blade.php
So create these files inside the following path and update them like below:
resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
@stack('style')
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
Laravelia
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4" style="background-color: rgb(245, 245, 245);">
@yield('content')
</main>
</div>
@stack('script')
</body>
</html>
Now another one for simple jquery form validation example.
resources/views/welcome.blade.php
@extends('layouts.app')
@push('style')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header" style="background: gray; color:#f1f7fa; font-weight:bold;">
Create New User
</div>
<div class="card-body">
<form
class="w-px-500 p-3 p-md-3 create-user"
action="{{ route('user.store') }}"
method="post"
enctype="multipart/form-data"
>
@csrf
<div class="row mb-3 form-group">
<label class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="name" placeholder="Name">
</div>
</div>
<div class="row mb-3 form-group">
<label class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" name="email" placeholder="Email">
</div>
</div>
<div class="row mb-3 form-group">
<label class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
</div>
<div class="row mb-3 form-group">
<label class="col-sm-3 col-form-label">Confirm Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm password">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label"></label>
<div class="col-sm-9">
<button type="submit" class="btn btn-success btn-block">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script>
window.addEventListener('load', function() {
$(".create-user").validate({
rules: {
name: {
required: true,
maxlength: 20,
},
email: {
required: true,
email: true,
maxlength: 50
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
equalTo: "#password"
},
},
messages: {
name: {
required: "Name is required",
maxlength: "Name cannot be more than 20 characters"
},
email: {
required: "Email is required",
email: "Email must be a valid email address",
maxlength: "Email cannot be more than 30 characters",
},
password: {
required: "Password is required",
minlength: "Password must be at least 5 characters"
},
confirm_password: {
required: "Confirm password is required",
equalTo: "Password and confirm password should same"
}
},
errorElement: 'span',
errorPlacement: function (error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
});
</script>
@endpush
Read also: POS Terminal Like Form In Laravel With Handlebar Js
Conclusion
Now we know jquery form validation in laravel 10. Hope this jquery validation on form submit laravel tutorial will help you. After completing this jquery form validation on submit, your concept will be clear about simple jquery form validation example.
