scriptygoddess

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

Now it’s quite painless.

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(strPhone) {
var digits = "0123456789";
var phoneNumberDelimiters = "()- ext.";
var validWorldPhoneChars = phoneNumberDelimiters + "+";
var minDigitsInIPhoneNumber = 10;
s=stripCharsInBag(strPhone,validWorldPhoneChars);
return (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.)