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

Share Improve this question Follow edited Apr 30, 2013 at 11:48 Chris asked Apr 30, 2013 at 11:36 ChrisChris 44155 gold badges1111 silver badges2020 bronze badges 2

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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
                    });