Some easy field validators
March 8th, 2007
The script at really easy field validation
is great for validation, as it leverages Prototype, which is also great.
But it could use more examples for extending it.
Here’s how I can double-check that you typed in the email address you thought you did:
<script type="text/javascript">
Validation.add('validate-email-doublecheck', 'Email does not match.', {
equalToField : 'Email', // this is that ID of the previous email form field
include : ['validate-email'] // sort of redundant, but doesn’t hurt
});
</script>
<dl>
<dt><label for=”Email”><em>*</em> Email Address:</label></dt>
<dd><input name=”Email” id=”Email” type=”text” size=”25″ maxlength=”50″ class=”validate-email”></dd>
<dt><label for=”Email”><em>*</em> Confirm Email Address:</label></dt>
<dd><input name=”EmailConfirm” id=”EmailConfirm” type=”text” size=”25″ maxlength=”50″ class=”validate-email-doublecheck”></dd>
</dl>
Here’s another example: my form has two submit buttons. Depending on the button, different fields are required. Among other things, this means I want to delay when the form is actually validated.
Since I’m using prototype, I’ll be using $() instead of getElementById().
resetRequired = function() {
toReset = $('Email','EmailConfirm','Addr1','Addr2','City','State','Zip');
toReset.each(function(field) { field.removeClassName('required')});
}
resetFormonclick = function() {
valid.reset();
return true;
}
onlineFormonclick = function() {
resetFormonclick();
resetRequired();
toRequire = $('Email','EmailConfirm');
toRequire.each(function(field) { field.addClassName('required')});
return valid.validate();
}
mailFormonclick = function() {
resetFormonclick();
resetRequired();
toRequire = $('Addr1','Addr2','City','State','Zip');
toRequire.each(function(field) { field.addClassName('required')});
return valid.validate();
}
window.onload = function () {
valid = new Validation(document.forms[0], {onSubmit : false, immediate : true});
resetForm = $(’reset’);
resetForm.onclick = resetFormonclick;
onlineForm = $(’submit_online’);
onlineForm.onclick = onlineFormonclick;
mailForm = $(’submit_mail’);
mailForm.onclick = mailFormonclick;
}
-Sud.
Posted in JavaScript |