Zip Code, Phone Number and Replacing Empty Fields with Really Easy Validation

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

Tagged as: javascript, javascript library, js, phone number, postal code, prototype, validation, zip code