Learning 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.