Simple JavaScript form evaluation with email check

<!DOCTYPE html>
<html>

<head>
<title>JS tutorial</title>
<style type="text/css">
body {
	margin:3px 10px; padding:3px;
	background-color:#345; color:#aaa;
	font-family:"Arial", serif;
}
input {
	font-size:0.8em; color:#555; margin:4px 0px 5px;
}
#res {
	padding:3px 4px; border:1px solid gray; color:#888; 
}
</style>
<script type="text/javascript">
	function clearField(field) {
		field.value = "";
	}
	function validateField(field, text) { 
		// letters
		if (text == "name") { 
			var pattern = new RegExp("^([A-z]{1,})+$"); 
			if (pattern.test(field.value)) {
				field.style.outline = "3px ridge green";
			}
			else { 
				field.style.outline = "3px ridge red";
			}
		}
		// numbers
		else if (text == "age") {
			var pattern = new RegExp("^([0-9]{1,})+$"); 
			if (pattern.test(field.value)) {
				field.style.outline = "3px ridge green";
			}
			else { 
				field.style.outline = "3px ridge red";
			}
		}
		// e-mail
		else if (text == "email") {
			var at = field.value.indexOf("@");
			var dot = field.value.indexOf(".");
			if (at < 1 || dot < at+2) {
				field.style.outline = "4px ridge red";
			}
			else { 
				field.style.outline = "4px ridge green";
			}
		}
		else return false;
	}
</script>
</head>

<body>
	<form>
		<label>Name : </label><br /> 
    	<input type="text" value="abcABC" size="20" maxlength="20" onfocus="clearField(this);" onblur="validateField(this, 'name');" /><br />  
		<label>Age : </label><br /> 
    	<input type="text" value="###" size="3" maxlength="3" onfocus="clearField(this);" onblur="validateField(this, 'age');" /><br />  
		<label>E-mail : </label><br /> 
    	<input type="text" value="e@mail.com" size="20" maxlength="20" onfocus="clearField(this);" onblur="validateField(this, 'email');" /><br /> 
	</form> 
</body>

</html>
Simple JavaScript form evaluation with email check

Comments

About

Contact

Get Connected
