[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JQuery Validation Plugin and Email format

Posted on 2014-07-10
4
Medium Priority
?
1,699 Views
Last Modified: 2014-07-29
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);
0
Comment
Question by:rgranlund
  • 2
4 Comments
 
LVL 35

Expert Comment

by:Terry Woods
ID: 40189634
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 40189707
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
 
LVL 7

Author Comment

by:rgranlund
ID: 40192481
@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
 
LVL 35

Accepted Solution

by:
Terry Woods earned 2000 total points
ID: 40193665
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question