To validate a form data and add custom error message on client side before send to the form data on server; In this tutorial, we are going to show how to validate form data with adding error custom message on client side using the jQuery form validator plugin.
jQuery Form Validation Custom Error Message
The jQuery provide several plugins for validating a diffrent diffrent types of form data on client side and also add error message using the plugin. In this form validation tutorial, we will discuss advance form validation using jQuery validator() method and add custom error message using the jquery plugin.
Contents
- Create one html form
- Keep jQuery cdn in form
- Write validation rules
- output
Create one html form
In this step, we need to create one html file. And inside this file we will create some fields like firstname, lastname, email, phone number, password.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator()</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<style>
.error{
color: red;
}
label,
input,
button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
.common_box_body {
padding: 15px;
border: 12px solid #28BAA2;
border-color: #28BAA2;
border-radius: 15px;
margin-top: 10px;
background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
<h2>Registration</h2>
<form action="#" name="registration" id="registration">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John"><br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" placeholder="8889988899"><br>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="[email protected]"><br>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder=""><br>
<input name="submit" type="submit" id="submit" class="submit" value="Submit">
</form>
</div>
</body>
</html>
Keep jQuery cdn in form
Now we need to put the jQuery library cdn plugin in form. In otherwords, To use jQuery Validation Plugin we need to include cdn library of jQuery validation plugin.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>Write validation rules
Next, we need to write some validation rules with custom error message in script tag. Below we have written this advance rules for validating a form data before send to the server. The validate() method is used to validate a form based on the selector provided.
<script>
$(document).ready(function(){
$("#registration").validate({
// Specify validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
phone: {
required: true,
digits: true,
minlength: 10,
maxlength: 10,
},
password: {
required: true,
minlength: 5,
}
},
messages: {
firstname: {
required: "Please enter first name",
},
lastname: {
required: "Please enter last name",
},
phone: {
required: "Please enter phone number",
digits: "Please enter valid phone number",
minlength: "Phone number field accept only 10 digits",
maxlength: "Phone number field accept only 10 digits",
},
email: {
required: "Please enter email address",
email: "Please enter a valid email address.",
},
},
});
});
</script>
output
Registration
To Remember
required – Makes the element required. remote – Requests a resource to check the element for validity. minlength – Element requires a minimum length. maxlength – Element requires a maximum length. min – Element is required to be given the minimum. max – Element is required to be given the maximum. stespan – Elements require a given stespan. email – Element requires a valid email url – Element require a valid url date – Element require a date. number – Element require a decimal number. digits – Element require digits only.You may like
- Registrtion form validation using jquery validator
- jQuery AJAX Form Submit PHP MySQL
- Simple Registration Form in PHP with Validation
- jQuery Ajax Form Submit with FormData Example
- Laravel 6 Ajax Form Submit With Validation Tutorial
- Google ReCaptcha Form Validation in Laravel
- Laravel 6 | jQuery Form Validation Tutorial with Demo Example
- Form Validation Example In Laravel 6
- Codeigniter php jQuery Ajax Form Submit with Validation
