Jquery Tutorials
- What is JQuery
- DOM Document Object Model
- JQuery Syntax
- Jquery Selector
- Get & Set Form value
- jQuery - Attributes
- Attribute Methods
- jQuery - DOM Manipulation
- JQuery Events
- JQuery Effects
- JQuery Html/Css
- jQuery Insert Content
- Auto Hide Div
- JQuery noConflict()
- JQuery Form Validation
- Form Validation
- Login Form Validation
- Jquery Fadeout message
- Modal popup
- Jquery Ajax Forms
- Dependent Dropdown
- Autocomplete Country jquery ajax
- Dynamic Content Load using jQuery AJAX
- Dynamic star rating jQuery AJAX
- Drag and Drop Image Upload
- show Hide Elements By click on checkbox
- How to Add class in jQuery
- calculate discount in jQuery
- Calculate GST by input value in text box
- check Password strength in jQuery
- Count Remaining Character
- onClick Checkbox check all
- password match or not
- DataTable
- Date Picker
- Multiselect Dropdown with Checkbox
- Add Dynamic Input Field (Add More Input Field)
- submit button disable after one click
- Show hide password in Password textbox using checkbox
- Put value in the text field
- Set Data and Attributes
Customer Say
jQuery Form Validation?
Form Validation : Example1
File name : index.php
<style>
body {
margin: 20px 0;
font-family: 'Lato';
font-weight: 300;
font-size: 1.25rem;
width: 300px;
}
form, p {
margin: 20px;
}
p.note {
font-size: 1rem;
color: red;
}
input, textarea {
border-radius: 5px;
border: 1px solid #ccc;
padding: 4px;
font-family: 'Lato';
width: 300px;
margin-top: 10px;
}
label {
width: 300px;
font-weight: bold;
display: inline-block;
margin-top: 20px;
}
label span {
font-size: 1rem;
}
label.error {
color: red;
font-size: 1rem;
display: block;
margin-top: 5px;
}
input.error, textarea.error {
border: 1px dashed red;
font-weight: 300;
color: red;
}
[type="submit"], [type="reset"], button, html [type="button"] {
margin-left: 0;
border-radius: 0;
background: black;
color: white;
border: none;
font-weight: 300;
padding: 10px 0;
line-height: 1;
}
</style>
<form id="basic-form" action="" method="post">
<p>
<label for="name">Name <span>(required, at least 3 characters)</span></label>
<input id="name" name="name">
</p>
<p>
<label for="age">Your Age <span>(minimum 18)</span></label>
<input id="age" name="age">
</p>
<p>
<label for="email">E-Mail <span>(required)</span></label>
<input id="email" name="email">
</p>
<p>
<label for="weight">Weight <span>(required if age over 50)</span></label>
<input id="weight" name="weight">
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#basic-form").validate({
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
min: 18
},
email: {
required: true,
email: true
},
weight: {
required: {
depends: function(elem) {
return $("#age").val() > 50
}
},
number: true,
min: 0
}
},
messages : {
name: {
minlength: "Name should be at least 3 characters"
},
age: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
min: "You must be at least 18 years old"
},
email: {
email: "The email should be in the format: abc@domain.tld"
},
weight: {
required: "People with age over 50 have to enter their weight",
number: "Please enter your weight as a numerical value"
}
}
});
});
</script>
Example2:-
File name : index2.php
<style>
body {
margin: 20px 0;
font-family: 'Lato';
font-weight: 300;
font-size: 1.25rem;
width: 300px;
}
form, p {
margin: 20px;
}
p.note {
font-size: 1rem;
color: red;
}
input, textarea {
border-radius: 5px;
border: 1px solid #ccc;
padding: 4px;
font-family: 'Lato';
width: 300px;
margin-top: 10px;
outline: none;
}
label {
width: 300px;
font-weight: bold;
display: inline-block;
margin-top: 20px;
}
label span {
font-size: 1rem;
}
label.error {
color: red;
font-size: 1rem;
display: block;
margin-top: 5px;
}
label.error.fail-alert {
border: 2px solid red;
border-radius: 4px;
line-height: 1;
padding: 2px 0 6px 6px;
background: #ffe6eb;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}
input.error, textarea.error {
border: 1px dashed red;
font-weight: 300;
color: red;
}
[type="submit"], [type="reset"], button, html [type="button"] {
margin-left: 0;
border-radius: 0;
background: black;
color: white;
border: none;
font-weight: 300;
padding: 10px 0;
line-height: 1;
}
</style>
<form id="basic-form" action="" method="post">
<p>
<label for="name">Name <span>(required, at least 3 characters)</span></label>
<input id="name" name="name">
</p>
<p>
<label for="age">Your Age <span>(minimum 18)</span></label>
<input id="age" name="age">
</p>
<p>
<label for="email">E-Mail <span>(required)</span></label>
<input id="email" name="email">
</p>
<p>
<label for="weight">Weight <span>(required if age over 50)</span></label>
<input id="weight" name="weight">
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#basic-form").validate({
errorClass: "error fail-alert",
validClass: "valid success-alert",
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
min: 18
},
email: {
required: true,
email: true
},
weight: {
required: {
depends: function(elem) {
return $("#age").val() > 50
}
},
number: true,
min: 0
}
},
messages : {
name: {
minlength: "Name should be at least 3 characters"
},
age: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
min: "You must be at least 18 years old"
},
email: {
email: "The email should be in the format: abc@domain.tld"
},
weight: {
required: "People with age over 50 have to enter their weight",
number: "Please enter your weight as a numerical value"
}
}
});
});
</script>
Example3:-
File name : index.php
<style>
.userform{width: 400px;}
.userform p {
width: 100%;
}
.userform label {
width: 120px;
color: #333;
float: left;
}
input.error {
border: 1px dotted red;
}
label.error{
width: 100%;
color: red;
font-style: italic;
margin-left: 120px;
margin-bottom: 5px;
}
.userform input.submit {
margin-left: 120px;
}
</style>
<form class="userform" id="userForm" method="post" action="">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" >
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" type="email" name="email" >
</p>
<p>
<label for="phone">Phone</label>
<input id="phone" type="phone" name="phone" >
</p>
<p>
<label for="url">URL</label>
<input id="url" type="url" name="url">
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</form>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#userForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
required: true,
number: true
},
url: {
required: false,
url: true
},
username: {
required: true,
minlength: 6
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
agree: "required"
},
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
phone: {
required: "Please enter your phone number",
number: "Please enter only numeric value"
},
url: {
url: "Please enter valid url"
},
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 6 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long",
equalTo: "Please enter the same password as above"
},
agree: "Please accept our policy"
}
});
});
</script>
Example
File name : index.php
Table
File name : index.php
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`web` varchar(200) NOT NULL,
`date_of_birth` date NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
--
-- Dumping data for table `users`
--
INSERT INTO `users` (`id`, `username`, `email`, `web`, `date_of_birth`, `password`) VALUES
(1, 'sana', 'sana@gmail.com', 'http://www.ittutorial.in', '0000-00-00', 'e10adc3949b');
Example
File name : index.php
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- jquery validation plugin //-->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<script type="text/javascript" src="validation_reg.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
.hidden{
display:none;
}
</style>
<form action="registration_process.php" method="post" id="form_register">
<fieldset>
<legend>Registration<legend>
<label for="reg_name">Name*</label>
<input type="text" name="name" id="reg_name" />
<label for="reg_user">Username*</label>
<input type="text" name="username" id="reg_user" />
<label for="reg_email">Email*</label>
<input type="text" name="email" id="reg_email" />
<label for="reg_web">Website*</label>
<input type="text" name="web" id="reg_web" />
<label for="reg_date">Date of Birth*</label>
<input type="text" name="date" id="reg_date" />
<label for="reg_pass1">Password*</label>
<input type="password" name="pass1" id="reg_pass1" />
<label for="reg_pass1">Confirm Password*</label>
<input type="password" name="pass2" id="reg_pass1" />
<input type="submit" name="register" value="Registraion" id="reg_submit" />
<input type="reset" name="Cancel" value="Cancel" id="reg_reset" />
</fieldset>
</form>
<script>
$(document).ready(function()
{
$("#form_register").validate(
{
rules:{
'name':{
required: true,
minlength: 1
},
'username':{
required: true,
minlength: 3,
username_regex: true,
remote:{
url: "validatorAJAX.php",
type: "post"
}
},
'email':{
required: true,
email: true,
remote:{
url: "validatorAJAX.php",
type: "post"
}
},
'web':{
required: true,
url: true
},
'date':{
required: true,
date: true
},
'pass1':{
required: true,
minlength: 8
},
'pass2':{
equalTo: '#reg_pass1'
}
},
messages:{
'name':{
required: "The name field is mandatory!",
minlength: "Choose a username of at least 1 letters!",
},
'username':{
required: "The username field is mandatory!",
minlength: "Choose a username of at least 4 letters!",
username_regex: "You have used invalid characters. Are permitted only letters numbers!",
remote: "The username is already in use by another user!"
},
'email':{
required: "The Email is required!",
email: "Please enter a valid email address!",
remote: "The email is already in use by another user!"
},
'web':{
required: "The Web Address is required!"
},
'pass1':{
required: "The password field is mandatory!",
minlength: "Please enter a password at least 8 characters!"
},
'pass2':{
equalTo: "The two passwords do not match!"
}
}
});
});
</script>
Example
File name : index.php
$(document).ready(function()
{
$("#form_register").validate(
{
rules:{
'name':{
required: true,
minlength: 1
},
'username':{
required: true,
minlength: 3,
username_regex: true,
remote:{
url: "validatorAJAX.php",
type: "post"
}
},
'recaptcha_response_field':{
required: true,
captchaCheck: true,
},
'email':{
required: true,
email: true,
remote:{
url: "validatorAJAX.php",
type: "post"
}
},
'web':{
required: true,
url: true
},
'date':{
required: true,
date: true
},
'pass1':{
required: true,
minlength: 8
},
'pass2':{
equalTo: '#reg_pass1'
}
},
messages:{
'name':{
required: "The name field is mandatory!",
minlength: "Choose a username of at least 1 letters!",
},
'username':{
required: "The username field is mandatory!",
minlength: "Choose a username of at least 4 letters!",
username_regex: "You have used invalid characters. Are permitted only letters numbers!",
remote: "The username is already in use by another user!"
},
'email':{
required: "The Email is required!",
email: "Please enter a valid email address!",
remote: "The email is already in use by another user!"
},
'web':{
required: "The Web Address is required!"
},
'pass1':{
required: "The password field is mandatory!",
minlength: "Please enter a password at least 8 characters!"
},
'pass2':{
equalTo: "The two passwords do not match!"
}
}
});
});
Extend the plugin and add new validation method
create an additional validation method in addition to those already present. To do this, use the function addMethod .
Therefore, we will create a method, called username_regex :
File name : index.php
$(document).ready(function()
{
// my method for validate username
$.validator.addMethod("username_regex", function(value, element) {
return this.optional(element) || /^[a-z0-9\.\-_]{3,30}$/i.test(value);
}, "Please choise a username with only a-z 0-9.");
$( "#reg_date" ).datepicker({
changeMonth: true,
changeYear: true
});
$("#form_register").validate(
{
rules:{
'name':{
required: true,
minlength: 1
},
'username':{
required: true,
minlength: 3,
username_regex: true,
remote:{
url: "validatorAJAX.php",
type: "post"
}
},
'recaptcha_response_field':{
required: true,
captchaCheck: true,
},
'email':{
required: true,
email: true,
remote:{
url: "validatorAJAX.php",
type: "post"
}
},
'web':{
required: true,
url: true
},
'date':{
required: true,
date: true
},
'pass1':{
required: true,
minlength: 8
},
'pass2':{
equalTo: '#reg_pass1'
}
},
messages:{
'name':{
required: "The name field is mandatory!",
minlength: "Choose a username of at least 1 letters!",
},
'username':{
required: "The username field is mandatory!",
minlength: "Choose a username of at least 4 letters!",
username_regex: "You have used invalid characters. Are permitted only letters numbers!",
remote: "The username is already in use by another user!"
},
'email':{
required: "The Email is required!",
email: "Please enter a valid email address!",
remote: "The email is already in use by another user!"
},
'web':{
required: "The Web Address is required!"
},
'pass1':{
required: "The password field is mandatory!",
minlength: "Please enter a password at least 8 characters!"
},
'pass2':{
equalTo: "The two passwords do not match!"
}
}
});
});
Validations with ajax
File name : validatorAJAX.php
<?php
// db connection
$connection = mysqli_connect('localhost', 'root', '','test') or die(mysql_error());
// function to verify the existence of usernames
function isset_username($username){
global $connection;
$username = trim($username);
$query = "SELECT COUNT(*) AS num FROM users WHERE username='" .mysqli_real_escape_string($connection,$username). "'";
$result = mysqli_query($connection,$query);
$row = mysqli_fetch_array($result);
if($row['num']>=1){
return TRUE; // true if user exists
}
else{
return FALSE;
}
}
//function to verify the existence of the email
function isset_email($email){
global $connection;
$email = trim($email);
$query = "SELECT COUNT(*) AS num FROM users WHERE email='" .mysqli_real_escape_string($connection,$email). "'";
$result = mysqli_query($connection,$query);
$row = mysqli_fetch_array($result);
if($row['num']>=1){
return TRUE; // true if user exists
}
else{
return FALSE;
}
}
/*
We complete AJAX request
*/
if(isset($_POST['username'])){
if(!isset_username($_POST['username'])){
echo 'true';
}
else{
echo 'false';
}
}
else if(isset($_POST['email'])){
if(!isset_email($_POST['email'])){
echo 'true';
}
else{
echo 'false';
}
}
?>
Customize errors
File name : index.php
body{
font-family: Arial;
text-align: center;
}
#form_register{
text-align: left;
background-image: url('background.jpg');
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
width: 330px;
margin-left: auto;
margin-right: auto;
padding: 0 1.5em 1.5em 1.5em;
margin: 0 auto;
overflow: hidden;
}
#form_register fieldset{
border: none;
}
#form_register legend{
display: block;
font-size: 25px;
padding: 10px;
}
#form_register label{
padding: 0px;
display: block;
font-size: 0.6em;
margin: 20px 0px 0px 0px;
}
/*LABEL CREATED TO VALIDATE*/
#form_register label.error{
color: #f33;
padding: 0;
margin: 2px 0 0 0;
font-size: 0.5em;
padding-left: 18px;
background-image: url('error.png');
background-position: 0 0;
background-repeat: no-repeat;
}
/*input text and password*/
#form_register #reg_user, #form_register #reg_email, #form_register #reg_pass1, #form_register #reg_pass2{
height: 30px;
width: 200px;
display: block;
border: none;
font-size: 16px;
line-height: 28px;
}
/*input type submit and reset*/
#form_register #reg_submit, #form_register #reg_reset{
height: 30px;
width: 220px;
color: #fff;
font-weight: bold;
opacity: 0.7;
border: 1px solid #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .6);
box-shadow: 0 0 .5em rgba(0, 0, 0, .6);
-webkit-appearance: none;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
display: block;
}
#form_register #reg_submit{background: #0a0; margin-top: 40px;}
#form_register #reg_reset{background: #f33; margin-top: 20px;}
#form_register #reg_submit:hover,
#form_register #reg_submit:active,
#form_register #reg_reset:hover,
#form_register #reg_reset:active{
cursor: pointer;
opacity: 1;
}