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);
LVL 7
rgranlundAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Terry WoodsIT GuruCommented:
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

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
0
rgranlundAuthor Commented:
@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

0
Terry WoodsIT GuruCommented:
I set up a jsfiddle to test it: http://jsfiddle.net/SbNJw/
and it's appearing to have trouble with the pattern. When I simplified the pattern, it started working.

The (?i) at the start is not allowed, to start with. To resolve that, we can change the pattern to:
                    regex: "^(('[\w-\s]+')|([\w-]+(?:\.[\w-]+)*)|('[\w-\s]+')([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-zA-Z]{2,6}(?:\.[a-zA-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


Also, the character set [\w-\s] is specifying a range, but it cannot do so with a \w as part of the range. This may be causing an error too. It can be changed to:
                    regex: "^(('[\w\s-]+')|([\w-]+(?:\.[\w-]+)*)|('[\w\s-]+')([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-zA-Z]{2,6}(?:\.[a-zA-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


Also also, backslashes should be doubled (except the escaped double quotes). Finally, this pattern worked for me:
                    regex: "^((\"[\\w\\s-]+\")|([\\w-]+(?:\\.[\\w-]+)*)|(\"[\\w\\s-]+\")([\\w-]+(?:\\.[\\w-]+)*))(@((?:[\\w-]+\\.)*\\w[\\w-]{0,66})\\.([a-zA-Z]{2,6}(?:\\.[a-zA-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


Note: I see your latest comment has single quotes in the pattern, rather than double. I've put double quotes in this solution, as you indicated in your original question text.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.