jQuery Validation Plugin allows special character in email?

Question

I'm using the jQuery Validation Plugin and everything works fine exept for emails, because there the ß character ist allowed (which of course should be non valid)?

It's not something only happening at my site I can even bypass the validation on the officeial demo site: http://jquery.bassistance.de/validate/demo/

Rule I'm using:

$("#form").validate({
    rules: {
            txtSubscribe: {
                required: true,
                email: true
            }
    }
});

Is there a way to add specific characters to the plugins email validation rule, or does anybody have a idea how to implement a solution that works for all email rules? (Because I'm using this quite often in a very large site.)

Answer 1

I opened a issue report on github https://github.com/jzaefferer/jquery-validation/issues/1012 and it seems like this is going to be fixed in the next release using the HTML5 specification for email: http://www.w3.org/TR/html5/forms.html#valid-e-mail-address

Regex:

/^[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])?)*$/

Here is a jsfiddle showing that this will return the correct result in my case:

http://jsfiddle.net/rv8bq/

It is aso possible to overwrite the default validation:

$.extend($.validator.methods, {
    email: function(value, element) {
      var re = /^[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])?)*$/;
        return this.optional(element) || re.test(value);
    }
});

Answer 2

The character is valid as long as the exchange server supports it.

You can add your own regex to validate the email as you want it:

$(function ()
{
    $.validator.addMethod("loginRegex", function(value, element) {
        return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
    }, "Username must contain only letters, numbers, or dashes.");

    $("#signupForm").validate({
        rules: {
            "login": {
                required: true,
                loginRegex: true,
            }
        },
        messages: {
            "login": {
                required: "You must enter a login name",
                loginRegex: "Login format not valid"
            }
        }
    });
});

The example is from here: using the jquery validation plugin, how can I add a regex validation on a textbox?