10
X

Form Validation Snippets: Email Validation with jQuery

With jQuery, it’s possible to write code that executes client-side validations for your forms and input fields. A common validation to make is to check whether or not an email address that’s entered into an email field is actually a valid email address (or at least in valid email address format). The following is a great snippet to use to perform your own client side email input validation without having to use a plugin:

(function ($) {

    $.fn.validateEmail = function () {
        return this.each(function () {
            var $this = $(this);
            $this.change(function () {
                var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                if ($this.val() == "") {
                    $this.removeClass("badEmail").removeClass("goodEmail")
                }else if(reg.test($this.val()) == false) {
                    $this.removeClass("goodEmail");
                    $this.addClass("badEmail");
                }else{
                    $this.removeClass("badEmail");
                    $this.addClass("goodEmail");
                }
            });
        });
    };
})(jQuery);

The snippet above assigns the class “goodEmail” to a submission that’s in email format (example@example.example) and “badEmail” to submissions that aren’t, and if the .badEmail class is applied to the submission, it won’t be validated and the form will not submit.

Continue Reading Below

Leave a Comment

IMPORTANT:

  • If you wish to post code examples, please wrap them in <code> tags.
  • Multi-line code should be wrapped in <pre><code> </code></pre>
  • Use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted.