asked on

JQuery Validation Plugin and Email format

I'm using the JQuery Form Validation Plugin. The code that validates my form is as follows:

<script type="text/javascript">
	 jQuery(function($) {
		// validate signup form on keyup and submit
		$("#getQuote").validate({
errorElement: 'div',
			rules: {
				bike_value: {
					required: true,
					digits: true
				},
				bike_state: {
					required: true,
					maxlength: 2
				},
				email_value: {
					required: true,
					email: true
				}
			},

			messages: {

				bike_value: {
					required: "Please enter the bike value"
				},
				bike_state: {
					required: "Please choose your state"
				},
				email_value: "Please enter a valid email address"
				
			},
			submitHandler: function(form) {
            form.submit();
        	}
        	
        	
		});

	});
	</script>

Open in new window

However, It will validate an email address without a DOT.COM. For example, if I enter test@test it will pass validation.
I want to add the following to the above code but I don't know how:
Something like: var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var valid = emailReg.test(email);

Terry Woods

To use regexes with jQuery validate, you can customise it as follows:

// Add regular expression option for jquery validate:
$.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Incorrect format; Please check your input."
);

Open in new window

Then use it like this:

				email_value: {
					required: true,
					email: true,
                                        regex: "(?i)^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)"
				}

Open in new window

And customise the regex error message for email like this:

			messages: {

				bike_value: {
					required: "Please enter the bike value"
				},
				bike_state: {
					required: "Please choose your state"
				},
				email_value: {
                                        required: "Please enter an email address",
                                        email: "Please enter a valid email address",
                                        regex: "Please enter this particular format of email address",
                                }				
			},

Open in new window

Scott Fell

That's impressive! This is simple

  <form action="" method="post">
<input type="email" name="email">
  <button type="submit">go</button>
<form>

Open in new window

http://www.w3.org/TR/html-markup/input.email.html

Robert Granlund

ASKER

@Terry That still did not validate the email address format. The following code also allowed it to pass to the next page without validating the other three fields. Does it have anything to do with the way I have quotes and single quotes when trying to match an email format?

	<script type="text/javascript">
	 jQuery(function($) {
	 	jQuery.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Incorrect format; Please check your input."
);

		// validate signup form on keyup and submit
		$("#getQuote").validate({
errorElement: 'div',
			rules: {
				bike_value: {
					required: true,
					digits: true
				},
				bike_state: {
					required: true,
					maxlength: 2
				},
				email_value: {
					required: true,
					email: true,
                    regex: "(?i)^(('[\w-\s]+')|([\w-]+(?:\.[\w-]+)*)|('[\w-\s]+')([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)"
				}
			},

			messages: {

				bike_value: {
					required: "Please enter the bike value"
				},
				bike_state: {
					required: "Please choose your state"
				},
				email_value: {
                     required: "Please enter an email address",
                     email: "Please enter a valid email address",
                     regex: "Please enter this particular format of email address"
                }		
				
			},
			submitHandler: function(form) {
            form.submit();
        	}
        	
        	
		});

	});
	</script>

Open in new window

ASKER CERTIFIED SOLUTION

Terry Woods

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial