<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>checkForm</title>
<script language="JavaScript" type="text/javascript">
function checkForm() {
	var loc_text = document.getElementById('text1').value;
	var loc_num = document.getElementById('num4').value;
	var loc_email = document.getElementById('email').value;

	if(isEmpty(loc_text) == true) {
		alert("Error: Text cannot be empty.");
		document.getElementById('text1').focus();
		return false;
	}
var regExp_loc1 = /^\d{4}$/;

// ok, pass as string but escape \ character	if(isPattern(loc_num, "^\\d{4}$") == false) {
	if(isPattern(loc_num, regExp_loc1) == false) {    // argument is in RegExp type
		alert("Error: 4 digits only, please.");
		document.getElementById('num4').focus();
		return false;		
	}

var regExp_loc2 = /^(\w+@)([a-z0-9]{1,}\.[a-z]{2,})$/i;
// ok, both strings	var regExp_Pat = new RegExp("^(\\w+@)([a-z0-9]{1,}\\.[a-z]{2,})$", "i");   
// ok, with RegExp	var regExp_Pat = new RegExp(/^(\w+@)([a-z0-9]{1,}\.[a-z]{2,})$/i); 

	if(isPattern(loc_email, regExp_loc2) == false) {
		alert("Error: email format a@a.com.");
		document.getElementById('email').focus();
		return false;		
	}	

	alert("validation complete, data will be sent to the server.");
	return true;

}

function isEmpty(str) {
	if(str.length < 1){
		return true;
	} else {
		return false;
	}
}

function isPattern(str, pat) {
	if(str.length < 1) {
		return false;
	}

	var regExp_Pat = new RegExp(pat);   // argument is in RegExp type
	return regExp_Pat.test(str);

// ok, string	var regExp_Pat = new RegExp("^\\d{4}$");
// ok, RegExp	var regExp_Pat = new RegExp(/^\d{4}$/);
// ok, RegExp literal	var regExp_Pat = /^\d{4}$/;	
}

</script>

</head>
<body>
<header><h1>checkForm</h1></header>
<section>
<h4>Form validation:</h4>
Criteria:
<ul><li>Text data: not empty</li>
<li>Number data: not empty 4 digits, leading zero is ok</li>
<li>Email: not empty, in a format a@a.com</li></ul>

<form name="f1" action="#">
Text Data: 
<input type="text" id="text1" title="Must not be empty"> <br>
Number Data (4 digits): <input type="text" id="num4" title="Must be 999"> <br>
Email: <input type="text" id="email" title="Must be a@a.com format">
<br><input type="submit" onclick="return checkForm()">
<input type="reset">
</form>

</section>
<footer><p style="text-align: right; color: blue">&copy; Copyright 2013 CCSF CNIT 132/133 class</p></footer>
</body>
</html>