JQuery.validate() passes email addresses with invalid domain format as valid

Question

JQuery.Validate's built in method for validating Email addresses looks like this:

return this.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( value );

This Regular expression passes email addresses like the one below as valid

testMail@test

In my model I'm using the datatype attribute [EmailAddress] which genererates the following regular expression:

^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$

This is the correct Regex which also validates the domain part of the email address, like:

testMail@test.correct

will be valid and email addresses formatted like the first example will now be invalid.

What happens is that when posting a form using jQuery.validate's regex (the default one) it sets the form as valid even with email addresses formatted as the first example. The posted form data gets passed to the server side which detects the invalid email-format and throws an error. Is this a known bug for the validate() plugin? Because I cant seem to find a ticket regarding this in the bugreport section (http://bugs.jquery.com/search?ticket=on&q=validate+email&page=3&noquickjump=1). I also tried updating jQuery.validate from 1.13 to 1.14 but the regex is identical in both versions.

Anyway, the solution I found for this was to extend the validation plugin by adding a custom rule:

var validCustomRegex = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/;
var custEmailValidationMessage;
$.validator.addMethod('customemail', function (value, element) {
    custEmailValidationMessage = $(element).data("val-regex");
    return this.optional(element) || validCustomRegex.test(value);
}, custEmailValidationMessage);

and then calling my custom function instead of the default email :

$(form).validate({somecode});

        $(form).find("input[type='email']").each(function () {
        var requiredMessage = $(this).data("validationmessage");
        var invalidFormatMessage = $(this).data("val-regex");
        var $self = $(this);
        $self.rules('add', {
            customemail: true,
            messages: {
                required: requiredMessage,
                email: invalidFormatMessage
            }
        });
    });

Is this an acceptable solution for this problem? The reason why I'm asking is that I checked this question : override jquery validate plugin email address validation and in the accepted answer by Tom, he says that he would'nt do this, but not why he would'nt. So why should one avoid a solution like this? I'm just curious regarding whats the "best practice" here.

Answer 1

Is this a known bug for the validate() plugin?

NO.

It is not a bug.

• jQuery Validate v1.12.0 Changelog‌​: "Methods: Update email to use HTML5 regex, remove email2 method"

• Validate Format of an Email Address using Jquery.validate.js

• How does HTML5 input type email works without top level domain name

• See http://en.wikipedia.org/wiki/Email_address#Domain_part for examples of valid email addresses.

---

Is this an acceptable solution for this problem? The reason why I'm asking is that I checked this question : override jquery validate plugin email address validation and in the accepted answer by Tom, he says that he would'nt do this, but not why he would'nt. So why should one avoid a solution like this? I'm just curious regarding whats the "best practice" here.

YES.

Whenever a method built into the plugin does not perform as you wish, you would simply create your own custom method and use that instead. There is absolutely nothing wrong with doing this and it's exactly why you have the .addMethod() method available to you.

My guess is that Tom simply meant that he would stick with the email validation built into the plugin (as would I) rather than create a new one; I'm almost certain he did NOT mean there is anything wrong with creating new rules/methods in general.