To validate forms using jQuery validation in Laravel; jQuery provides a library for form validation with many options, using which you can validate your forms on the client side.
In this guide, we will create a form with two fields and include JQuery validation plugin in the form, as well as validate your form on the client side using rules of validation plugin.
How to Validate Form Using jQuery in Laravel 11
Steps to validate form fields using jQuery validation plugins in laravel 11:
Step 1 – Create Controller and Method
To create a new controller, simply use php artisan make:controller FormController on cmd to create it into your laravel applications:
php artisan make:controller FormController
And in this controller, you will have to create methods to display the form and validate the form data or fields using jQuery before submit on the controller, So Navigate to app/http/controllers folder and open the FormController.php file, Create something like the following:
public function index()
{
return view('form');
}
public function validateForm(Request $request)
{
$validatedData = $request->validate([
'name' => 'required',
'email' => 'required|email'
]);
//implement code to insert form data after validation
return redirect('form')->with('status', 'Form Data Has Been validated');
}
Step 2 – Define Form Routes
To create a route to display the form and send the form data on the controller for server-side validation, So, navigate to the routes folder and open the web.php file, in this web.php file create something like this:
use App\Http\Controllers\FormController;
Route::get('form', [FormController::class, 'index']);
Route::post('validate-form', [FormController::class, 'validateForm']);
Step 3 – Create a Blade view
To make simple form in laravel; Navigate to your resources/views folder and create a form.blade.php file in it, then create a form in form.blade.php file, something like this:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 jQuery Form Validation Example - Tutsmake.com</title>
</head>
<body>
<div class="container">
<form id="jQueryValidationForm" method="POST" action="{{ url('validate-form') }}">
@csrf
<div class="mb-3">
<label for="name">Name</label>
<input type="text" id="name" name="name" class="form-control" required>
@error('name')
<div class="text-red-500">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label for="email">Email</label>
<input type="email" id="email" name="email" class="form-control" required>
@error('email')
<div class="text-red-500">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Before creating a validation rule to validate the form, need to add a Jquery validation plugin inside the head tag on your HTML page (form.blade.php), something like this:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Now, you can write validation rules for your form using the jQuery Validation plugin, so that you can validate your Laravel form on the client side or without refreshing the web page, You can write and use validation rules for your form like this in form.blade.php file:
<script>
$(document).ready(function() {
$("#jQueryValidationForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please enter your name",
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
}
},
errorElement: "div",
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
});
</script>
Step 4 – Run Development Server
To start the laravel application server, simply run the php artisan serve command on cmd or terminal window:
php artisan serve
And open your browser with the following url to test this application:
http://localhost:8000/form
Conclusion
We hope you have validated the Laravel form on the client side using Jquery Validation Plugin with the help of this guide, if you are facing any error while using this guide then you can mail us at [email protected].
Recommended Laravel Tutorials
Happy coding!
