Form validation is an indispensable part of any web application, making sure the submitted data is correct, complete, and fits specific criteria. While Laravel server-side validation goes efficient, client-side validation adds to the user experience by giving instant feedback before submission.
Advantages of using Client Side Validation
- Prompt response
- Decreased laid on server
- Superior User Interface
Steps for Client-Side Form Validation in Laravel 11 by using jQuery:
Step 1: Setting up a Laravel form
Make a new Blade file:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 Form Validation</title>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.error {
color: red;
font-size: 14px;
margin-left: 10px;
}
input {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>User Registration Form</h1>
<form id="registrationForm">
@csrf
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<span id="nameError" class="error"></span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<span id="emailError" class="error"></span>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<span id="passwordError" class="error"></span>
</div>
<button type="submit">Submit</button>
</form>
<script>
// jQuery validation script will go here
</script>
</body>
</html>Step 2: Add jQuery Validation
Next, we need to add jQuery to validate the form fields before submission.
Add this script inside <script> tag in your blade file
Code:
$(document).ready(function() {
$('#registrationForm').on('submit', function(e) {
e.preventDefault(); // Prevent form submission
$('.error').text('');
let name = $('#name').val();
if (name === '') {
$('#nameError').text('Name is required.');
return;
}
let email = $('#email').val();
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (email === '') {
$('#emailError').text('Email is required.');
return;
} else if (!emailPattern.test(email)) {
$('#emailError').text('Please enter a valid email address.');
return;
}
let password = $('#password').val();
if (password === '') {
$('#passwordError').text('Password is required.');
return;
} else if (password.length < 6) {
$('#passwordError').text('Password must be at least 6 characters long.');
return;
}
alert('Form submitted successfully!');
});
});Step 3: Pair with Server-Side Validation
You can use the validate method in your controller to ensure data integrity.
Code:
public function store(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
'email' => 'required|email|unique:users,email',
'password' => 'required|string|min:6',
]);
}Conclusion:
This guide has demonstrated how to set up and integrate validation efficiently. Get in touch with our skilled Laravel developers if you run into any issues putting client-side form validation using jQuery into practice.
