Zip Code, Phone Number and Replacing Empty Fields with Really Easy Validation
- Simple Hide and Show with Prototype
- Event Observe and Event Listeners with Prototype
- JavaScript Script.aculo.us Fade with a Timer
- Evolving Styles: Add, Change Remove Classes with Prototype
- Alternating Colors Using Prototype
- First, Last, Active and Only List Styles With Prototype
- Change Rel External to Target Blank using Prototype
- Zip Code, Phone Number and Replacing Empty Fields with Really Easy Validation
- Limit Characters in a Textarea with Prototype
- Open Links to a Different Site in a New Window with Prototype
Since I started using the Really Easy Validation library that builds off the Prototype library I have accumulated a few custom validations that I use constantly and have perfected for my own needs.
US Phone Number Validation
This validation accepts any of the following ten digit phone number formats
- (555)555-5555
- 555-555-5555
- 555.555.5555
- 555 555 5555
Or mix and match it, which would be unusual but still possible and accepted.
JavaScript
['validate-phone-us', 'Please enter a valid US Phone Number. (xxx)xxx-xxxx', function(v) {
var regex = /^(\()?(\d{3})([\)-\. ])?(\d{3})([-\. ])?(\d{4})$/;
return Validation.get('IsEmpty').test(v) || regex.test(v);
}]
US Zip Codes and Canada Postal Codes
This validates for both US and Canadian zip/postal codes in one field, whose formats are any of the following:
- 55555
- 55555-1234
- X5X-5X5
It will also take a Canadian postal code and replace it with the uppercase value in the field before it submits. So x5X-5x5 would return as valid and replace the field's value with X5X-5X5. If you want to disable that part of the functionality just comment out the line $(elm).value = v; by adding // at the beginning of the line.
JavaScript
['validate-us-ca-postal', 'Please enter a valid US zip code or Canadian postal code.', function(v,elm) {
v = v.toUpperCase();
var regex = /((^\d{5}([- |]\d{4})?$)|(^[A-Z]\d[A-Z][- |]\d[A-Z]\d$))/;
if(Validation.get('IsEmpty').test(v) || regex.test(v)){
$(elm).value = v;
return true;
}
return false;
}]
Replace an Empty Field with N/A
There have also been times when I need a field to fill itself out when it's empty (it doesn't make sense to me either, it was a request.)
This validation replaces an empty field with 'N/A'
JavaScript
['empty-na', 'Please enter a value or \'N/A\'', function(v,elm) {
if(Validation.get('IsEmpty').test(v) && (v !='N/A')){
$(elm).value = 'N/A';
return true;
}
return true;
}]
This validation replaces a field the does not have a numeric value with the value N/A. So it will accept any number but empty or anything including characters other than numbers is replaced by 'N/A'
JavaScript
['validate-numeric-empty-na', 'Please enter a numeric value or \'N/A\'', function(v,elm) {
if((isNaN(v) || Validation.get('IsEmpty').test(v)) && (v !='N/A')){
$(elm).value = 'N/A';
return true;
}
return true;
}]
Incorporating the Custom Validation
Adding custom validations like these is really easy in with this library. When you start a new validation class in your page it will look similar to this:
JavaScript
<script type="text/javascript">
Event.observe(window, 'load', function() {
new Validation('bookRequest');
});
</script>
All you have to do is add the new validations using the addAllThese method, like so:
JavaScript
<script type="text/javascript">
Event.observe(window, 'load', function() {
new Validation('form-id');
Validation.addAllThese([
['validate-phone-us', 'Please enter a valid US Phone Number. (xxx)xxx-xxxx', function(v) {
var regex = /^(\()?(\d{3})([\)-\. ])?(\d{3})([-\. ])?(\d{4})$/;
return Validation.get('IsEmpty').test(v) || regex.test(v);
}],
['validate-numeric-empty-na', 'Please enter a numeric value or \'N/A\'', function(v,elm) {
if((isNaN(v) || Validation.get('IsEmpty').test(v)) && (v !='N/A')){
$(elm).value = 'N/A';
return true;
}
return true;
}],
[...]
]);
});
</script>
Separate the different validations with a comma (note: after the last ].)
Then just apply the class to the fields.
HTML
<input type="text" class="validate-phone-us required" name="homephone" id="homephone" value="" />
Just as easy as the rest of the library's implementation!
That's one thing I really like about this library, it's very easy to build off of. As far as I am concerned a library of code isn't helpful if you can't build off of it easily, having to go in and modify scripts is a pain, especially when you go to upgrade the original author's version. The addAllThese method really helps alleviate that problem!
Related Links
- Canadian Postal Code - Canadian postal code system explained
- Really Easy Validation - Great JavaScript validation library built using Prototype
- Prototype JavaScript Library - Making cross-browser JavaScript easier for me
the newest discoveries, stories and shared tips!Come on, all the cool kids are doing it ;)


