<?php
$jsChecks = ""; //holds JS error checks
$errorFound = false;	//PHP error flag
 
//Creates both JS and PHP error checks
function errorCheck($elementName, $regExp, $errMsg) {
	global $jsChecks;
	global $errorFound;
	//Create Javascript error checking
	$check = '
	var ' . $elementName . 'Filter = ' . $regExp . '; 
	if (!' . $elementName . 'Filter.test(theForm.' . $elementName . '.value)) { 
		errorMessage += "\n  * ' . $errMsg . '";
		errorFound = true;
	}' . "\n";
	$jsChecks .= $check;
 
	//PHP error checking and return input class
	if(isset($_POST["formSubmitted"])) {	//if form submitted
		if(!preg_match($regExp, $_POST[$elementName])) {
			$errorFound = true;
			return "error"; //css error class
		}
	}
	return "";	//no class if no error detected
}

//Create error checking
$nameError = errorCheck("name", "/([a-z0-9]{3}[a-z0-9]?)/", "Name is too short");	//Must be 3 chars or over
$emailError = errorCheck("email", "/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", "Invalid Email Address");	//must be valid email address

//If no error found
if(!$errorFound) {
	//Process form data...
}
?>

 
<style type="text/css">
input {
	border: 1px solid #DDD;
}
.error {
	border: 1px dashed #F00;
}
</style>
 
<script type="text/javascript">
<!--
function validateForm(theForm) {
	var errorFound = false;
	var errorMessage = "Please correct the following errors:\n";
	<?php echo $jsChecks ?>
	if(errorFound) {
		alert(errorMessage);
	}
	return !errorFound;
}
//-->
</script>

 
<form method="post" onSubmit="return validateForm(this)">
	<label for="name"><strong>Name</strong> (must be 3 characters or over)</label><br />
	<input type="text" name="name" id="name" size="30" class="<?php echo $nameError ?>" value="<?php echo @ $_POST['name'] ?>" /><br />
	<label for="email"><strong>Email Address</strong> (must be a valid email address)</label><br />
	<input type="text" name="email" id="email" size="30" class="<?php echo $emailError ?>" value="<?php echo @ $_POST['email'] ?>" />
	<br />
	<input type="hidden" name="formSubmitted" id="formSubmitted" value="true" />
	<input type="submit" value="Submit" />
</form>