Simple form evaluation with JavaScript

JavaScript can be used to evaluate an user's inputs into a form on a HTML webpage. The adventage of using JavaScript to evaluate a form mainly lays in fact that the code being executed on client's machine is reliable, practical and very fast to execute. In the example below we will see a simple REGEX way of evaluting a few form fields only with the JavaScript code.

NOTE: JavaScript also introduces some safety vulnerabilities so it is a better way to evaluate and sanitize form data with combining JavaScript, with PHP form evaluation and HTML5 new input types.

Example of a simple form evaluation with e-mail check in JavaScript

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

›› go to examples ››

Simple form evaluation with JavaScript

Example of a simple form evaluation with e-mail check in JavaScript

Comments

About

Contact

Get Connected