Sunday, 26 October 2014

Pure JavaScript Live Form Validation(Non styled)

This is a perfect example for cool and responsive popup Sign Up/In form.
All you need to do is to add the HTML, CSS and Javascript to your page and add some styles.

You should pass the code here :

EXAMPLE:

<html>

<head>
<title>Form Validation</title>
<style>
// Here paste the CSS CODE
</style>
</head>
<body>
// Here paste the HTML CODE

<script>
// Here paste the JAVASCRIPT CODE
</script>
</body>
</html>





****HTML CODE****

<div class="form">
<form action="http://www.easilylearnhtml.blogspot.com" method="get" class="form">
Username: <input type="text" class="user" />
<br />
Password: <input type="password" class="pass" />
<br />
Email: <input type="text" class="email" />
<br />
<input type="submit" class="submit" />
</form>
</div>


****CSS CODE****

body {
margin: 0;
padding: 0;
}
.user, .pass, .email {
border: 1px solid #BFBFBF;
}


****JAVASCRIPT CODE****

function addEventHandler(evtTarget, evt, fnction, bubl) {
if (addEventListener) {
evtTarget.addEventListener(evt, fnction, bubl);
} else if (attachEvent) {
evtTarget.attachEvent("on" + evt, fnction);
}
} // cross-browser event handler


// Real time for validation

function autoFormValidation(form, patt) {

addEventHandler(form, "input", function(e) {
var pattern = patt;
var target = e.target.value;
var check = pattern.test(target);
if (!check) {
e.target.style.border = "3px solid red";
} else {
   e.target.style.border = "3px solid green";
}
}, false);

addEventHandler(form, "input", function(e) {
if (e.target.value == 0) {
e.target.style.border = "1px solid #BFBFBF";
}
}, false);
}

// checks if the fields are filled correct

addEventHandler(document.querySelector(".form"), "submit", function(e) {
if (document.querySelector(".user").value == 0 || document.querySelector(".pass").value == 0 ||
document.querySelector(".email").value == 0) {
e.preventDefault();
alert("Some of the forms arent filled");
}

if (document.querySelector(".user").style.border == "3px solid red" ||
document.querySelector(".pass").style.border == "3px solid red" ||
document.querySelector(".email").style.border == "3px solid red" ) {
e.preventDefault();
alert("Edit the red fields...");
}
}, false);




autoFormValidation(document.querySelector(".user"), /^\w{4,}$/); // username input
autoFormValidation(document.querySelector(".pass"), /^\w{6,}$/); // password input
autoFormValidation(document.querySelector(".email"), /^[a-zA-z0-9_]{4,}[@]{1}[a-z]{2,}\.{1}[a-z]{2,}$/); //email input


LIVE DEMO:

Username:
Password:
Email: