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:
<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…)
<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>