As a web developer in today's ever-evolving digital landscape, I understand that creating reliable and user-friendly forms is at the core of engaging web applications. Forms serve as gateways for user interaction, making them a fundamental element of any web project.
Form validation is all about checking user-provided data to make sure it meets specific criteria or constraints before the server processes it. Validating data on the client-side not only enhances the user experience but also lightens the server's workload by reducing unnecessary processing and database interactions.
In this comprehensive guide, I'm excited to share my step-by-step process for implementing client-side form validation using the Validate.js library in Laravel 10.
So, let's see how to validate form using validate.js in laravel 10, laravel 10 form validation using validate.js, laravel 10 jQuery form validation, Laravel JS validation.
If you haven't already, install Laravel 10 using Composer with the following command.
composer create-project laravel/laravel my-project
Then set up your database connection in the .env file.
Create a form with fields you want to validate (e.g., name, email, password, etc.) in a Blade view file (e.g., resources/views/form.blade.php)
In the form, utilize Laravel's built-in form validation features, such as @csrf, @method, and @error directives.
Inside the Blade view file, you can start building your form. Here's a simple example of an HTML form.
<!DOCTYPE html>
<html>
<head>
<title>How to Validate Form using Validate.js in Laravel 10 - Vidvatek</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
</head>
<body>
<div class="container">
<form id="registrationForm" method="POST" action="{{ route('register') }}">
@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">Register</button>
</form>
</div>
</body>
</html>
Use Composer to install the Validate.js package in your Laravel project.
Installing
Browser/CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
Require.js/AMD
require(["validate.js"], function(validate) {
// ...
});
npm/node.js
$ npm install --save validate.js
var validate = require("validate.js");
Bower
$ bower install --save validate.js
Component
$ component install ansman/validate.js
Include the Validate.js script in your Blade view where you have your form.
Create a JavaScript object with validation rules for your form fields. For example.
const rules = {
name: 'required',
email: 'required|email',
password: 'required|min:6',
};
<script>
$(document).ready(function() {
$("#registrationForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
}
},
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 following command.
php artisan serve
You might also like:
- Read Also: AJAX CRUD Operations In Laravel 10: Step-by-Step Guide
- Read Also: How to Sort Array from Smallest to Largest
- Read Also: How To Validate Form in React JS
- Read Also: Top 10 Tricks and Tips of Laravel