5 Ways to Implement Email Validation in jQuery

Email validation in jQuery is key to maintaining data quality and preventing failed user sign-ups. We'll explore four common ways to handle this, complete with working code snippets. We also examine the pitfalls of these traditional approaches and show how Abstract API addresses their limitations.

How to Implement Email Validation in jQuery

These methods use jQuery to check email formats on the client side. Each approach offers a different way to integrate validation logic directly into your web forms.

Direct Regex in a jQuery Handler

This approach involves a direct regular expression check. A common pattern attaches an event handler to a form element, such as on a “blur” or “submit” event. When the event fires, the code runs a well-known RFC-5322–style regular expression against the input's value to test for a valid email structure. A JavaScript validation guide explains this further.

The code below defines a constant, “emailRx”, which holds the regular expression. It then listens for the form's “submit” event. Inside the handler, it gets the email input's value and uses the “test” method to check if it matches the regex pattern. If the test fails, it prevents form submission.

const emailRx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z-0-9]+\.)+[a-zA-Z]{2,}))$/;
$('form').on('submit', e => {
    const v = $('#email').val();
    if (!emailRx.test(v)) { e.preventDefault(); alert('Bad address'); }
});

Reliance on HTML5 and the DOM Validity API

This method uses the browser's native validation capabilities. By setting an input's “type” attribute to “email”, modern browsers automatically perform a syntactic check on the value entered by the user. You can then use jQuery to hook into the browser's validation events.

This allows you to manage the user interface state, for example, by adding or removing an error class. Some discussions show this can conflict with other plugins. The code first sets the input's type to “email”. It then attaches a handler to the “invalid” event, which adds an “error” class if the browser finds the input invalid.

Another handler on the “input” event removes the class once the entry becomes valid according to the browser's “checkValidity” method. This jQuery validation approach is common.

$('#email')
    .attr('type', 'email')               // modern browsers validate automatically
    .on('invalid', function () { $(this).addClass('error'); })
    .on('input',  function () {
        if (this.checkValidity()) $(this).removeClass('error');
    });

The jQuery-Validation Plugin

The popular jQuery-Validation plugin provides its own email validation rule. This rule uses a simplified regular expression and integrates with the plugin's system for unobtrusive error messages. To implement it, you call the “validate” method on your form selector.

Inside the method's options, you define rules for your form fields. For the email field, you set both the “required” and “email” properties to “true”. You can also specify custom error messages. The plugin's documentation offers more details.

$('#myForm').validate({
    rules:   { email: { required: true,  email: true } },
    messages:{ email: 'Please supply a valid address.' }
});

Remote or AJAX Validation

This technique uses the jQuery-Validation plugin to perform validation on the server via an AJAX call. It uses the plugin's built-in “remote” rule to send the input's value to a specified server-side script. The server script processes the email address and returns a response, typically “true” or “false”, to indicate validity.

The plugin then uses this response to mark the field as valid or invalid on the client side. The remote method documentation explains how the plugin handles the response.

$('#myForm').validate({
    rules: {
        email: {
            required: true,
            email: true,
            remote: { url: '/check-email.php', type: 'post' }
        }
    }
});

Challenges of Email Validation in jQuery

While these jQuery methods offer quick client-side checks, they introduce significant challenges. Their reliance on browser-side logic and regular expressions creates several unavoidable pitfalls for developers.

• Regex-based approaches like the Direct Regex handler and the jQuery-Validation plugin use patterns that fail to parse all valid RFC 5322 formats. They often misclassify addresses with quoted strings or nested comments, which leads to complex and unmaintainable code.
• Client-side scripts cannot query DNS for MX records. They only check syntax, so an address can pass a format test but still be undeliverable. This limitation affects all purely client-side jQuery methods.
• HTML5 validation and jQuery regex patterns handle internationalized emails inconsistently. They often reject non-ASCII characters in local parts or domains, a process that frustrates users with international addresses.
• Spec-compliant formats like plus-addressing or internal domains often trip up the regex in the Direct Regex and jQuery-Validation plugin methods. This forces developers to accept junk data or write many exceptions.