I have managed to adapt a jquery form validation example to work with my site, but I don't know how to make sure it's just numbers entered in the phone number field and just email addresses entered in the email field.

Please can anyone help?

Also wondering if there is anything that could be improved?

<script language="javascript" type="text/javascript" src=".validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
   $( "#quickform" ).validate({
           rules: {
                   name: {
                       required: true
                   },
                   phone: {
                       required: true,
                       phonevalidation: true
                   },
                   email: {
                       required: true,
                       emailvalidation: true
                   },
                   enquiry: {
                       required: true
                   }

           },
           messages: {
                   name: {
                       required: "Please enter your name."                         
                   },
                   phone: {
                       required: "Please enter your phone number."                         
                   },
                   email: {
                       required: "Please enter your email address."                         
                   },
                   enquiry: {
                       required: "Please enter your enquiry."                         
                   }
           },
   });
   $.validator.addMethod("phonevalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Please enter a valid phone number."
   );
   $.validator.addMethod("emailvalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Please enter a valid email address."
   );
});
</script>

EDIT:

There are already validation methods in the example but it is to not accept special characters. I just need to understand how to change the /^[A-Za-z\d=#$%@_ -]+$/ to email and number validation.

I have managed to adapt a jquery form validation example to work with my site, but I don't know how to make sure it's just numbers entered in the phone number field and just email addresses entered in the email field.

Please can anyone help?

Also wondering if there is anything that could be improved?

<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn./ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
   $( "#quickform" ).validate({
           rules: {
                   name: {
                       required: true
                   },
                   phone: {
                       required: true,
                       phonevalidation: true
                   },
                   email: {
                       required: true,
                       emailvalidation: true
                   },
                   enquiry: {
                       required: true
                   }

           },
           messages: {
                   name: {
                       required: "Please enter your name."                         
                   },
                   phone: {
                       required: "Please enter your phone number."                         
                   },
                   email: {
                       required: "Please enter your email address."                         
                   },
                   enquiry: {
                       required: "Please enter your enquiry."                         
                   }
           },
   });
   $.validator.addMethod("phonevalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Please enter a valid phone number."
   );
   $.validator.addMethod("emailvalidation",
           function(value, element) {
                   return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
           },
   "Please enter a valid email address."
   );
});
</script>

EDIT:

There are already validation methods in the example but it is to not accept special characters. I just need to understand how to change the /^[A-Za-z\d=#$%@_ -]+$/ to email and number validation.

• javascript
• jquery

• 2 "I don't know how to make sure it's just numbers entered in the phone number field" — Don't. Instead, let people format their phone numbers. You can strip formatting characters out on the server. – Quentin Commented Apr 30, 2013 at 11:38
• Thanks for the replies. Sorry I should have been clearer. There are already validation methods in the example but it is to not accept special characters. I just need to understand how to change the /^[A-Za-z\d=#$%@_ -]+$/ to email and number validation. – Chris Commented Apr 30, 2013 at 11:49

3 Answers 3

There are already email and phone rules present in the validation framework

<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn./ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn./ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script>
$(function() {
    $( "#quickform" ).validate({
        rules: {
            name: {
                required: true
            },
            phone: {
                required: true,
                phoneUK: true //or look at the additional-methods.js to see available phone validations
            },
            email: {
                required: true,
                email: true
            },
            enquiry: {
                required: true
            }

        },
        messages: {
            name: {
                required: "Please enter your name."                         
            },
            phone: {
                required: "Please enter your phone number."                         
            },
            email: {
                required: "Please enter your email address."                         
            },
            enquiry: {
                required: "Please enter your enquiry."                         
            }
        },
    });

});
</script>

I would suggest to construct a Regular Expression and match that to what the user enters and use the match() function.

For more info on how to construct the right regular expression (depending on your locale) go to RegExp tutorial.

I have UK phone number validation

jQuery.validator.addMethod('phoneUK', function(phone_number, element) {
                        phone_number = phone_number.replace(/\s+/g, '');
                        return this.optional(element) || phone_number.match(/^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$/);
                    }, 'Please specify a valid phone number');


                    $('#inputTelephone').rules('add', {
                        required: true,
                        phoneUK: true
                    });