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

{googlead}

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

This site runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 2 comments }

1 ranjit June 22, 2011 at 2:38 am

expecting same code. thanks

2 Terri Ann
Twitter:
June 23, 2011 at 10:40 am

Huh? Um, I’m glad you got the same code you expected?!?!?

Comments on this entry are closed.

Previous post:

Next post: