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() == "") {
                }else if(reg.test($this.val()) == false) {

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.

Caching Elements in jQuery

If you cache your jQuery elements, it means that you store an element as a variable so that you can re-use that element without your jQuery having to re-query the DOM in search of it every time you want to apply some code to that element. It’s not always necessary, but in cases where you know you’ll be using certain elements a lot in your code, it’s not a bad idea to cache them, because that’ll help your code work faster and more efficiently.

Here’s how you would cache an element, it’s actually super simple! For this example, let’s cache a class called .main:

 var main = $(“.main”);

That’s literally all it takes to cache an element. Then when you want to use it later, you just have to refer back to the name that you gave you variable, like this:

 main.css(“color”, “blue”);

The code above will change the CSS so that the color of the text in the .main class is blue. You can cache as many selectors as you like and give the variables whatever name you like, and this should help keep your code light and clean.

Show/Hide HTML Elements Using jQuery

jQuery’s .show() and .hide() methods can be used to show or hide any HTML elements on a page. Usually, the methods are used as the results of a trigger event (for example, if an item is either hidden or shown based on a click event) or used with a timer function so that something hides or shows based on how long a page has been loaded for. Whatever context you choose to use .show() or .hide() methods, they’re pretty handy and easy to understand.

For an example of how you would use the methods as a result of a click event, see the code below:


The example above demonstrates how you would use a click event to trigger an element appearing on a page. After the .button class is clicked, any h1 on the page that is hidden would be shown. Using the .hide() method instead would require the exact same syntax.

The .show() and .hide() methods also take a speed parameter that allows you to define the speed at which you’d like to have the selected elements appear or disappear. You can define the speed as a number (in milliseconds) or string (slow, fast). See an example of how to use the speed parameter below:


There are also a few other parameters that the .show and .hide methods will accept, including easing effects. As with most jQuery methods, you can also place a callback function within the method’s parentheses to be executed after the show/hide event.

jQuery’s .fade() Method

In jQuery, there several different methods that can be used to make an element fade in and out of view. They are: .fadeIn(), .fadeoOut(), .fadeToggle(), and .fadeTo().

.fadeIn() and .fadeOut() are pretty self explanatory. When triggered, it is used to have items either fade in or fade out, respectively. .fadeToggle() is used to toggle between .fadeIn() and .fadeOut(), so when .fadeToggle() is triggered the first time, the elements will fade out, and when it’s triggered again, they’ll fade in. If it’s triggered a third time, the elements will fade back out. .fadeTo() is used to partially fade elements out. With .fadeTo() you can control the opacity level that the elements fade to.

Here’s an example of how you would use .fadeOut() in context:


When the code in the above example is executed, the .main element will fade out at a slow rate when it’s clicked. The two parameters that the .fadeOut() method takes are speed (could be in milliseconds or in fixed values like slow), and a callback, which gives you the option to insert another function to be executed once the fade is complete. .fadeIn() and .fadeToggle() take the same parameters.

How to Use jQuery’s .one() Method

jQuery’s .one() method is a really cool method that, when used, will trigger a function attached to a certain selector or element only once. Normally with jQuery methods, they will occur as many times as the trigger event is triggered, but when you use the .one() method, the code that it’s attached to only gets executed once per page load.

As an example, let’s say we wanted to use the .one() method to trigger an alert when a button with the class “.alert-button” is clicked, and we only want this to happen ONE time (so if the user clicks the button twice or three times, the alert will only have shown up after the first click. This is actually pretty easy to employ in your jQuery. To see how it works, check out the code below.

$(".alert-button").one("click", function(){
 alert("This alert message will only appear once!");

So once that .alert-button button is clicked, the alert will pop up. But if the button is clicked again, no alert message will appear. We’ve found this method to be extremely useful because often in our projects we do want to limit actions to occurring only once, and it’s great to have a simple and effective way to do that.

Using jQuery to Check All Boxes

If you want to include a “check all” option in any of your projects, it’s actually pretty easy to do using jQuery. The snippet below demonstrates how to include a check all button that will check all of the inputs that fall within one fieldset tag. To start, make sure your HTML looks something like this:

<input type="checkbox" class="checkall"> Check all <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>
<input type="checkbox"> Checkbox <br>

So the first input type with the .checkall class is going to be the input that, when checked, will also check all the other boxes that are in that fieldset. The jQuery for achieving this effect is as follows:

$(function () {
$('.checkall').click(function () {
$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);

Again, this code will only apply the check all functionality to boxes within the fieldset of the check all button. If there are other checkboxes within a different fieldset, they won’t be affected by the checking of this particular check all button (but if the code of another fieldset is exactly the same, checking that check all button will check all of the checkbox input fields in that particular fieldset). The code can be changed and customized to reflect your own classes.