I have a form on my site where users can put in their phone number and it will call them and then call my phone system...

In order to make this work well, I need to add validation to the jquery form before it is submitted... but, I'm having major issues making this work.

The form submits the number (even if it is 2 digits) to my asterisk box, which then dials it...

I need to validate that the "number to call" is a valid phone US number. If I get this working, I will definitely post some example code on my blog so that other people can use it.

I should note that some of the php refs are because I use wordpress.


scripts:

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.DOMWindow.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src='/clickcall/jquery.form.js'></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript">
jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});;
</script>

<script type="text/javascript">
  <script>
  $(document).ready(function(){
    jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
	return this.optional(element) || phone_number.length > 9 &&
		phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
$("#myform1").validate({
  rules: {
    numbertocall: {
      required: true,
      phoneUS: true
    }
  }
});
And this is the form (hidden div pops when you click link - ie DOMWindow code...)

Code:
			<a href="#clickcall" class="clientDOMWindow1">Call me now!</a>
			<script type="text/javascript"> 
			$('.clientDOMWindow1').click(function(){ 
    		$.openDOMWindow({ 
        	loader:1, 
        	loaderImagePath:'animationProcessing.gif', 
        	loaderHeight:16, 
       		loaderWidth:17,
       		height:200,
       		width:550,
       		windowPadding:2,
        	windowSourceID:'#clickcall' 
    		}); 
    		return false; 
			}); 
			</script> 
			
			
			<div id="clickcall" class="mainarea" style="display:none;">	
			
			<table width="550" height="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#30424c" background="<?php bloginfo('stylesheet_directory'); ?>/images/clientbackground.jpg">
                <td colspan="3" align="center">
                				<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png">
                				<br />
					<form action="call.php" id="myForm1" method="post">
					    <label for="cphone"><font style="color:white; font-size:10pt;"><strong>Please enter your number below to be called immediately. <br />
					    Your phone will ring within 10 seconds after you click 'Call Me Right Now'<br /> 
					    Upon answering your phone you will be routed to our help line:</font><br /><br /></label>
					    <input class="validate" id="cphone" name="numbertocall" type="text" />
					 <input type="submit" id="submitphone" value='Call Me Right Now' style="padding:3px;color:black;background-color:#dde0d4;border: 1px solid #666;" />
					</form>