scriptygoddessOne of the things I've been playing around with a lot recently is jquery. Why I didn't jump on this bandwagon sooner, I'm not sure, but I am kicking myself for it. So I am still a bit of nub on the jquery front – but I like to think I pick things up quickly. 😀
So one thing I am now using jquery regularly for is form validation. Previously, form validation used to mean a lot of script writing, not to mention a fair amount of dread.
My current usage of that plugin is pretty basic until I get a better handle of it. But one thing that I have been requested a number of times, is to add validation for a phone number – which is not included in that plugin. I'm not sure this is the "right" or best way to do it – but it does work. 
The functions are basically the same as those provided here with some minor modifications and altered to be used with the jquery plugin.
First of course you include the jquery javascript file:
<script language="javascript" type="text/javascript" src="/js/jquery.min.js"></script>
Then the validation plugin:
<script type="text/javascript" src="/js/jquery.validate.pack.js"></script>
Then you add the function to check the phone number:
<script type="text/javascript">
$.validator.addMethod("phone", function(phone_number, element) {
var digits = "0123456789";
var phoneNumberDelimiters = "()- ext.";
var validWorldPhoneChars = phoneNumberDelimiters + "+";
var minDigitsInIPhoneNumber = 10;
s=stripCharsInBag(phone_number,validWorldPhoneChars);
return this.optional(element) || isInteger(s) && s.length >= minDigitsInIPhoneNumber;
}, "Please enter a valid phone number");
Some "helper" functions:
function isInteger(s)
{ var i;
for (i = 0; i < s.length; i++)
{
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}
function stripCharsInBag(s, bag)
{ var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++)
{
// Check that current character isn't whitespace.
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}
Then the line that makes the jquery run:
$(document).ready(function() {
$("#myform").validate();
});
</script>
To use the jquery validation plugin – I was just adding "required" as a class to those fields that were required. Like this:
<input type="text" name="FirstName" class="required" />
You can check email structure by also adding the class "email".
<input type="text" name="EmailAddress" class="required email" />
And now, using the code above, if you add the class "phone" – it will check a phone number.
<input type="text" name="PhoneNumber" class="required phone" />
(My code above allows for some additional characters beyond just numbers – so that it will accept parens around the area code – dashes or periods between the numbers and "e" "x" "t" characters as well – in case someone needs to include an extension.)
Typical disclaimer – like I said – I'm still a nub at jquery. There may be a better/easier way to do the above, so as always feel free to chime in if you know what that better/easier way is…
Updated 5/5/08 I do see a "phone" method in the "additional-methods.js" file… but I needed it do things a little differently… (like allowing extension numbers etc.)
Updated 5/29/08 Had some issues with the method not allowing phone fields to be optional and only checking the values if something was entered (when optional). Fixed that now.
Updated 7/1/08 As JT noted in the comments with regex this can be simplified. JT provided the following code:
function isValidPhoneNumber(ph) {
if (ph == null) {
return false;
}
var stripped = ph.replace(/[\s()+-]|ext\.?/gi, "");
// 10 is the minimum number of numbers required
return ((/\d{10,}/i).test(stripped));
}
So to update the jquery:
$.validator.addMethod("phone", function(ph, element) {
if (ph == null) {
return false;
}
var stripped = ph.replace(/[\s()+-]|ext\.?/gi, "");
// 10 is the minimum number of numbers required
return ((/\d{10,}/i).test(stripped));
}, "Please enter a valid phone number");
And then you can loose the other "helper" functions. (Thanks JT!!)
