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:
No comments:
Post a Comment