How to validate email with jQuery Validate plugin

Question

In some cases jQuery Validate plugin is not perfect for email validation. "abc@test.c"(Single letter suffix) and "중국어@test.com"(Non alpha-numeric) get passed as valid email addresses.

How can I filter these two invalid email addresses using jQuery Validate plugin?

Answer 1

As per the documentation , you'll need to construct your own custom method.

Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.

Arguments:

name; String The name of the method, used to identify and referencing it, must be a valid javascript identifier

method; Callback The actual method implementation, returning true if an element is valid. First argument: Current value. Second argument: Validated element. Third argument: Parameters.

message (Optional); String, Function The default message to display for this method. Can be a function created by jQuery.validator.format(value). When undefined, an already existing message is used (handy for localization), otherwise the field-specific messages have to be defined.

---

The following is a custom method that I named newemail . Right now, it's just using the default function for "email" validation. Simply edit the regex within this function to suit your particular needs.

jQuery.validator.addMethod("newemail", function(value, element) {
            // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
            return this.optional(element) || /^((([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])))$/i.test(value); 
}, "Please enter a valid email address");

Then use it inside .validate() just like you would use any other rule.

rules: {
    InputName: {
        required: true,
        newemail: true
    }
}

Answer 2

Here is my solution using remote: :

$("#myForm").validate({
    rules: {
        femail: {
            required: true,
            email: true,
            remote: "lib/ajax/checkEmail.php"
        }
    },
    messages: {
        femail: {
            required: 'Please input email',
            email: 'Please input valid email',
            remote: 'This email is duplicated/invalid, please re-input an email'
        }
    },
    submitHandler: function(form) {
        form.submit();
    }
});

In checkEmail.php , it implements extra logic to validate special cases, then at least echo either true or false in return.

Hope it helps.