Validate US Phone Number and Zipcode for dummies

I've been dinking for days on how to validate a proper US phone number and zip code. I finally think I have it.

First, add this code to validate.js (if you can't find the file, don't even do this!) I'm not an expert on JavaScript, so I hacked and bashed the comma's and all that.

['validate-phone', 'Please enter a valid US Phone Number. (xxx)xxx-xxxx', function(v) {
    return Validation.get('IsEmpty').test(v) || /^(\()?(\d{3})([\)-\. ])?(\d{3})([-\. ])?(\d{4})$/.test(v)
}],



['validate-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;
}],

In the back end, pick Validate "Yes" from the validation tab. Use "Prototype" as this will cause validate.js to call in the HEAD.

Next, don't put any fields in the Validation tab. For some reason, it screws it up. Use class="validate-postal" and class="validate-phone" and the other old-school ways to call validation.

Someone might prove me wrong on some of this. I haven't spent the time to completely test all the scenarios. It's working nicely for me following these rules.

Hope this saves someone some time. I sure wish someone would add phone and postal validation to the Validation tab. Not me!

Thanks!

Hi chrono,

Google is your friend. There's a Google Group for Andrew Tetlaw's validation code (the code ChronoForms uses) and you'll find a phone number validation here

Bob

Thanks for the link to the Google groups! Awesome! Maybe that should be the "how to"!

Hi Chrono1,

I've added it to a FAQ.

Bob

I am able to get this to work with the phone number. I was wondering if anyone can explain why we are not able to have a required field along with the validation?

Is there syntax that we can add to the actual form code that would require a specific field to be required thus bypassing the validation tab all together?

Thanks,
Brian

Hi Brian,

Yes, you can add class="required" or class="required email", etc.

Check to see what ChronoForms would add in that case and put it in by hand.

You should then set Validation On in the forms manager as an easy way to load the js libraries - but don't set any fields there that you have set by hand.

Bob

Here is something else that pertains to required fields. When I set "colors" as a required field I get a required message for each one.

Is there a way to only get the message once?

I am using the name "colors" for each one because it allows the selection of only one. If I do not use the same name they are able to select all of them.

I could be doing something incorrectly... I have not done a lot of forms development so I am a bit new at this.

Thanks for your patiences.

Brian

        
<input type="radio" name="colors" value="1 Color" id="color1" />
<label id="color1" for="color1"> 1 </label>

input type="radio" name="colors" value="2 Colors" id="color2"
label id="color2" for="color2"> 2 /label

input type="radio" name="colors" value="4 Colors" id="color3"
label id="color3" for="color3"> 4 Color Process /label

input type="radio" name="colors" value="Not Sure" id="colorns"
label id="colorns" for="colorns"> Not Sure /label

input type="text" name="colors" size="4"
label id="othercolor" for="colorother"> Other /label

I was able to get this working properly by removing the id= parameter.


Thanks for the great product...

Brian

Hi Brian,

The 'required' validation is just that as you've discovered. What you need here is 'validate one required'. I think that may need some slightly different set up though.

Bob

Greetings Bob,
What I did to get it working was add the validation on the back end under 12- Radio/Checkbox "colors" (quotes for emphasis).

In the code I removed the id= parameter.

It seems to be working as needed. Creates one validation (required) error instead of one for each radio button.

I did not have to add 'validate one required' though I tried using it previously on another radio selection and it worked.

Am I missing something that may bite me later???

Thanks for all the support.

Brian

Hi Brian,

If it's working that's good. Not sure why removing the ID fixed it (ids 'should' be unique, but I don't think many browsers check).

Bob

Ok...I'm using Joomla! 1.5.0 with Chrono Forms 2.5 J1.5 RC3.1, using the mootools validation setting, and I would love to validate phone numbers the same way the other, built-in validation works - I'm not 100%, but it looks like it is server side validation, kind of like using asp.net validation controls, but with php. I know very little about php but understand asp.net fairly well. I dislike using javascript validation because it is still prone to malicious attacks, plus as an overall cohesiveness, using one form of validation looks better than having some inline validation messages and some pop-up validation messages.

How do I go about doing this? What can we do to include this type of validation in the next release of chrono forms?

Thanks,

Steve

Hi Steve,

The validation ChronoForms uses is client side JavScript validation, though you can fairly easily implement server side validation but you'd have to code from scratch.

Either could be extended to phone and zip codes and I'm sure that there are plenty of scripts for the server side. There's Dexagogo Group on Google where you might well find the client side versions (Dexagogo is the validation library that CF uses.)

Bob

Ok well if it is javascript, how would I go about adding to the existing CF files so I could add a "robust" solution to validate u.s. phone numbers. "robust" meaning from the joomla! admin section, and the CF form details validation tab, i can add whatever field names to the phone number validation group (like the existing groups, "email", "alphanum", etc...) and have the error message appear underneath the field when the user doesn't enter in data that matches the regular expression?

my whole point here is that if we can figure this out, it can be included in forthcoming versions of CF, instead of CF users having to hack it or use explicit javascript/php/whatever and try to make it work like the existing validaiton.

thanks for your response,

steve

In the mean time, I switched back to using prototype and tried the previously mentioned hack to validation.js, though I was unable to get the regular expression to match the desired out put so I changed it to the following:

['validate-phone', 'Please enter a valid US Phone Number: xxx-xxx-xxxx.', function(v) { 
                return Validation.get('IsEmpty').test(v) || /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/.test(v) 
            }],

The error message advises the user to input the data according to the regular expression used, "^[0-9]{3}-[0-9]{3}-[0-9]{4}$", both differ from the previously mentioned hack.

Don't forget to clear all form element names from the CF validation tab groups, then hard code the class names to the form elements in the form code tab - html section.

e.g.

<input name="lname" class="required" value="" type="text" />

Note that if you want to combine classes, I've found that if you list the classes separated by a space, it will work:

<input name="lname" class="required validate-alpha" value="" type="text" />

Thanks for your help, now lets get working on a more robust solution!

Have there been any update to the US Phone validation? I'd like to incorporate this into existing forms that are already using mootools. Would I have to completely rework these forms?

Hi NuMedia,

There's been no change to the validation code. But you can easily edit the validation JavaScript to validate a US phone number (provided that you *only* have US users).

Bob