With all of this in mind, I created the Y-Validator, using PHP5 for the back end. There’s a test version available to play with, and you can download the code to follow along if you like.
In PHP, we specify validation by instantiating the
$v = new yValidate();
$v->add('name','+NAME','namefeedback','Required, valid names are letters, numbers and '-()?'');?>
y-validate.php library contains the
yValidate class. We start by feeding the object the various inputs that need validation via the
- The first parameter is the ID or
Nameof the field; radio buttons and checkboxes use Name (and
is used for checkboxes so that PHP receives an array of values), while all other fields use ID.
- The second parameter is the validation type, defined in the private object variable
regValidations, which maps the parameter string with a regular expression for validation. It’s prefixed with
+for required fields.
- The third parameter specifies the ID of the tag in which the feedback is placed.
- The fourth parameter is the message text that tells the user what’s expected.
From this point, validating the submitted code is a matter of passing the
$_POST variable through
$v->validateAll($_POST). It uses the mappings defined in
$v->add(...) to validate the input, returning true or false on validation, plus an array of errors, if applicable. That’s the back end all sewn up!
<?php echo $v->buildJS(); ?>
<?php $v->jsValidations(); ?>
When we’re building the front end to capture input, we include the front-end script
y-validate.js. This creates a class that’s similar to the PHP script above. To link the two validations, we call two methods of the PHP object. First,
window.onload to attach the same Name + Regular Expression relationships held in the PHP object to the fields in the form.
jsValidations method ensures the validation for the back end becomes the assistance checks on the front end. Update the back end and the front end is also updated, which means the validation can’t get out of step.
<label for="name">Your name <?php echo $v->fieldFeedback('name','namefeedback',$namefeedback);?></label>
<input type="text" name="name" id="name" value="<?php if (isset($name)) echo $name;?>" />
Both the back- and front-end code needs to be able to inform the user should an input issue arise. Naturally, the fields themselves have labels, and that’s the perfect place to put the feedback for users when an input needs correction.
fieldFeedback takes three parameters:
- The first is the field to which the feedback is appropriate.
- The second is the ID of an
<em>to create in order to catch feedback; this maps to the third parameter of
- The third parameter is the initial prompt defined in the fourth parameter of
So, aside from the second parameter in
$v->add(...) that sets the validation to use, the parameters between the two map together nicely.
Once the page has loaded, the
window.onload fire, checking the values using the configured regular expressions.
Already Out There
I’ve used PHP for my library (see below), but other languages and frameworks have hit upon this idea, too:
- PHPCake has an extension called JS Validator; it relies on AJAX for back-end validation.
- Ruby on Rails uses AJAX to farm the validation directly to the back-end validation.
- Work is currently being done on CodeIgniter.
- Python’s got a clever guy who released a library about the same time I started work on this one.
Aside from the Python solution, most validators for this concept rely on AJAX to send the fields back to the server for validation. Since the validation requirements don’t generally change within the few seconds of a page request and a user inputting data, that’s an extra overhead for per-field validation. Also, these scripts don’t hook into the best method of helping the user — telling them what’s expected first. By attaching the English description of the validation to each field, and having that appear as a helpful hint first to prompt the user on what to enter, we help the user to get it right first time. How many times have you looked at a form and growled "Why didn’t you tell me that when I started?"
- We have one place to find the enhancement, so it’s less confusing for future maintainers of our code to located the points at which various validations and assistances are implemented in the code.
- The code also promotes the separation of behaviour from presentation. The programmer programs the validation and the designer implements the presentation of the feedback.
- The user feels in more control, having confidence in hitting the big submit button.
Don’t forget: the code for the PHP-Validate and a sample form is available for download.