Easily Generate Javascript and PHP Error Checking For Your Forms

I wanted a quick and easy way of adding Javascript and PHP error checking to my form elements. The benefit of this is that errors can be caught using Javascript before the form is submitted, but if JS is disabled in the users browser then the error is still caught using PHP.

The method I came up with to solve this is very simple and can be easily added to form elements with little extra code. The error checking is done by checking input against regular expressions.

See the demo and demo source code.

Code Explaination

One function is used to create both forms of error checking:

<?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
}

Error checking is created for the form elements specifying which element (by name), a regular expression to be checked against and a custom error message:

//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 is found then process the data.

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

In our head tags we add the following Javascript and CSS rules. The Javascipt checks we created for each element are included here by the PHP ehco:

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

The form is really simple with code to display a CSS class depending on whether a error is detected (for the PHP error checking) and to set the value of the field:

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

There you are, both Javascript and PHP error checking! See the complete source code here.

Tags: Javacsript • PHP • Programming • Web Development

Windows Text Editors

I’m a Mac user through and through but recently I have been required to use Windows for work. My favourite text editor for Mac is undoubtedly Textwrangler which is a free stripped-down version of Barebones BBEdit. This is a great text editor that does everything I need.

After having such good experiences with Textwranger on OS X my job was finding a Windows alternative. Other than the usual features (syntax highlighting etc) I was looking for:

1. FTP Support (though I do not use this text editor feature on OS X, this was a requirement for me on Windows)
2. Powerful multi-file search / replace
3. Tabbed file editing
4. Smart indenting- shortcuts to indent / unindent whole blocks of text
5. Matching brackets

After some searching and testing of various solutions I found Crimson Edit, this is a great text editor that is also free! The only small problem I have had is a few bugs in the FTP connections but this is forgiveable and for me was the best free text editor for Windows. Crimson Edit has been open-sourced because the developer had no time for it any more.

Unfortunately Crimson Edit does not support SFTP connections so I had to look further. In the end I went for EditPlus. This application costs but is fairly cheap (35USD / 30 day trial available) and has a extermely powerful array of features (like Search / replace regular expression support and advanced (S)FTP support with file browser pane). I found out about this editor as it is used by the Magento developers.

Tags: Likes • OS X • Programming