Validating contact form - first time jquery user
Hey,
I'm using the validator method from jquery with custom rules and messages. Most are working however I need help getting jquery to validate the phone number textfield as well as if the user leaves a radio button group unchecked.
Here's what i want to do:
Phone textfiled vaildation -
- "please provide a contact number" - if left blank
- "please enter numbers only" - if user enters text
- "number must be between 8 and 10 characters" - limit the range of the phone number for better accuracy
Radio button group (2 options) -
custom message saying "please tell us how you'd like to be contacted"
-------------------------------------------------------------------------------------------------------------------------------------------------------
Here's what my jquery looks like so far
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contactform").validate({
rules: {
name: "required",
// RULE FOR THE PHONE TEXTFIELD
phone: {
required: true,
digits: true,
minlength: 8,
maxlength: 10
},
email: {
required: true,
email: true
},
//RULE FOR THE RADIO BUTTON GROUP
prefcontact: {
checked: true
},
message: {
required: true
}
}/*end rules*/,
messages: {
name: {
required: "You must provide your name"
},
// ERROR MESSAGE FOR THE PHONE TEXTFIELD
phone: {
required: "Please provide a valid phone number",
digits: "Your contact number must be numbers only",
minlength: jQuery.format("Your contact number must be at least {0} numbers."),
maxlength: jQuery.format("Your contact number can't exceed {0} numbers."),
},
email: {
required: "Please provide a valid e-mail address",
email: "E-mail address eg: user@host.com"
},
//ERROR MESSAGE FOR THE RADIO BUTTON GROUP
prefcontact: {
checked: "Please tell us how you'd prefer to be contacted!"
},
message: {
required: "Please provide as much detail about your enquiry as possible!"
}
}//end messages
});//end validate{
});//end jquery
</script>
And for the form elements in question...
...<tr>
<td><label for="phone"><p class="formlabel">Phone:</p></label></td>
<td class="formerror"><input type="text" name="phoneno" id="phoneno" tabindex="2" class="required digits" /><em>*</em></td>
</tr>...
<tr>
<td><label for="prefcontact"><p class="formlabel">Preferred contact:</p></label></td>
<td class="formerror"><p><input type="radio" name="prefcontact" value="phone" id="prefcontact_0" tabindex="4" class="required" />
Phone <em>*</em><br />
<input type="radio" name="prefcontact" value="e-mail" id="prefcontact_1" tabindex="5" />
E-mail</p></td>
<td></td>
</tr>
Any help would be greatly appreciated.
Cheers!