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 ([email protected]) 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

Comments are closed.

Sorry, but comments for this entry are now closed.