jQuery Form Validation Custom Error Message
jQuery form validation custom error message; Through this tutorial, i am going to show you how to validate a form data and add custom error message on client side before send/submit the form data on server using the jQuery form validator plugin.
jQuery Form Validation
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="9998899888"><br>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com"><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>
