<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>

<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>

<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>

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');

<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>

$(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!"

}

}

});

});

$(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!"

}

}

});

});

<?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';

}

}

?>

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;

}