Laravel 10 - Tutorial on how to use jQuery to validate the form
Today we will explore how we can use jQuery to validate the Laravel form. In order to run the project we need the following steps
To follow the steps, first we need to create a laravel project. If you have an existing laravel setup then you can skip this step. Open the terminal / cmd panel and execute the following command to install and create a new laravel project named "jquery_validation" using composer:
composer create-project --prefer-dist laravel/laravel jquery_validation
Configure your database connection to save the form data. We are using mysql database for this tutorial. Open the .env file and update the env values with your database credentials.
DB_CONNECTION=mysql
DB_HOST=database_host_ip_or_url
DB_PORT=database_port
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password
Open the /app/routes/web.php file and add the following to create two routes.
// First screen
Route::get('/', function () {
return view('first_screen');
});
// Second screen
Route::post('/save-form', [UserController::class, 'save_form'])->name('saveform');
Create the UserController using the laravel artisan command
php artisan make:controller UserController
In the save_form method of your UserController, we will implement the server-side valiadtion using Laravel's valiation rules.
public function save_form(Request $request)
{
$validator = Validator::make($request->all(), [
'name' => 'required|string|max:255',
'email' => 'required|email|unique:users',
'password' => 'required|string|min:8|confirmed',
]);
if ($validator->fails()) {
return redirect('/')
->withErrors($validator)
->withInput();
}
// Save form data
return redirect('/')->with('success', 'Data saved successfully!');
}
Now, we will create a simple form to capture the name, email and password. Under the resources/views/ create a new file first_screen.blade, and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 - Tutorial on how to use jQuery to validate the form - betekie.com</title>
<!-- Include jQuery library -->
<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>
</head>
<body>
<div class="container">
<form id="capturedata" method="POST" action="{{ route('saveform') }}">
@csrf
<div class="form-group">
<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="form-group">
<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>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="form-control" required>
@error('password')
<div class="text-red-500">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Save Data</button>
</form>
</div>
</body>
</html>
In your resources/views/first_screen.blade.php file, add the following script to perform client-side validation using jQuery Validation:
<script>
$(document).ready(function() {
$("#capturedata").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
password_confirmation: {
required: true,
equalTo: "#password"
}
},
messages: {
name: "Please enter your name",
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
},
password: {
required: "Please enter a password",
minlength: "Your password must be at least 6 characters long"
}
},
errorElement: "div",
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
});
</script>
Run the application server using following command
php artisan serve
Open the following url on your browser to run the laravel application
http://localhost:8000
I hope it helps to understand the basic concept of using jQuery in Laravel 10.