Javascript form Validation a Simple Exmple

Dear Guys in this Video Tutorial I show you how Easy it is to Validate form fields using simple Regex functions

Here is the entire Code I have embedded the Css , JS and html all together in a single file to keep things simple …Use this Logic for all your Projects!…I hope that this was useful to you..

 

index.html

 
<html >
<head><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js”></script></head>
<title>Test Html</title>

<meta charset=”utf-8″ />
<body>
<script>
//Regex code for fullname
var fullnameregex = /^[A-Za-z ]{3,20}$/;

var emailvalidate = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

var numbervalidate = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;

var regspace = /^\S*$/;

function validate(){

//get the values from localstorage
var fullname = localStorage.getItem(‘fullname’);
var email = localStorage.getItem(’email’);
var username = localStorage.getItem(‘username’);
var passwd = localStorage.getItem(‘passwd’);

if(fullname == 1 && email == 1 && username ==1 && passwd ==1){
$(post).removeAttr(‘disabled’);
}else{
$(post).attr(‘disabled’, ‘disabled’);
}

}

function valfullname(){
//alert(‘valfullname’);
var fullname = document.getElementById(“fullname”).value;

if(fullnameregex.test(fullname)){
// alert(‘validation passed’);
$(‘#fullname’).css(‘border’, ‘3px #090 solid’);
localStorage.setItem(‘fullname’,1);
validate();
}else{
// alert(‘validation failed’);
$(‘#fullname’).css(‘border’, ‘3px #C33 solid’);
localStorage.setItem(‘fullname’,0);
validate();
}

}
function valemail(){
//alert(‘valemail’);
var email = document.getElementById(“email”).value;
//alert(email+’validate email’);

if (emailvalidate.test(email)){
//alert(‘true’);
localStorage.setItem(’email’,1);
$(‘#email’).css(‘border’, ‘3px #090 solid’);
validate();
}else{
// alert(‘false’);
localStorage.setItem(’email’,0);
$(‘#email’).css(‘border’, ‘3px #C33 solid’);
validate();
}

}
function valpassword(){
//alert(‘valpassword’);

var passwd = document.getElementById(“passwd”).value;
//alert(passwd.length+’i am length’);

if(passwd.length < 6){
//alert(‘i am short’);
localStorage.setItem(‘passwd’,0);
$(‘#passwd’).css(‘border’, ‘3px #C33 solid’);
validate();
}else{
//alert(‘i am long’);
localStorage.setItem(‘passwd’,1);
$(‘#passwd’).css(‘border’, ‘3px #090 solid’);
validate();
}

}
function valusername(){
//alert(‘valusername’);
var username = document.getElementById(“username”).value;

if(regspace.test(username) && username.length > 3){
$(‘#username’).css(‘border’, ‘3px #090 solid’);
localStorage.setItem(‘username’,1);
validate();
}else{
$(‘#username’).css(‘border’, ‘3px #C33 solid’);
localStorage.setItem(‘username’,0);
//alert(‘false’);
validate();
}

}

</script>
<label>Full name </label>
<input id=”fullname” type=”text” onkeyup=”valfullname();”> <br /><br />
<label>Email </label>
<input id=”email” type=”text” onkeyup=”valemail();”> <br /> <br />
<label>Password </label>
<input id=”passwd” type=”password” onkeyup=”valpassword();”> <br /> <br />
<label>Username </label>
<input id=”username” type=”text” onkeyup=”valusername();”> <br /><br />

<input type=”submit” id=”post” disabled=”disabled”/>
</body>

</html>

Recent Posts

Leave a Comment