isEmpty jQuery Plugin

by

HTML5 form validation is pretty cool. I’m a big fan, even if it needs to be supported with some client-side magic and server side validation. What I don’t like is when a form tells users that they are doing something wrong… before they have even had a chance to do anything. So I made something to fix that.

The isEmpty jQuery Plugin is a simple little script that loops through specified elements, adding a specific class as necessary. It will also check to see if the field is being used, and will automagically add and remove classes as needed.

What Does it Do?

The isEmpty plugin is a simple jQuery plugin that works a little magic to hide error warnings from HTML form fields that are required until the user has interacted with them. It strikes me as rather poor form to tell someone they’re doing it wrong before they have actually done anything.

It does this by adding an extra class to required fields that don’t have any field that is completely empty. It also monitors for when people have started typing into fields, and removes the class. It can, optionally, readd the class if the user empties a field, but this is disabled by default.

This allows us to write a small amount of extra CSS that is more specific than the standard :invalid CSS, which hides the error styling from being displayed until the user interacts with elements.

Usage

The jQuery isEmpty plugin has been built with ease of use in mind, so that you can set it up and get straight to using it. Being a jQuery plugin you will want to load both jQuery and the plugin to ensure that it will actually run. If you’re already using jQuery then you just need to load the plugin script, there is no need to add jQuery multiple times:

<script src="//ajax.googleapis.com/ajax/libs/jquery/<!--[jQuery]-->/jquery.min.js"></script>
<script src="js/jquery.isEmpty.min.js">

With the plugin loaded, and jQuery running as well, it’s simple to get things running. Simply copy/paste the following code into your site, somewhere after the plugin:

$(function() {
  $('[required]').isEmpty();
});

That’s it. The isEmpty plugin is up and running, working it’s magic on any elements with a required attribute. There’s a little bit more that you’ll need to do in order to get any form of visual feedback though. You’ll need to write some CSS. By way of example, the CSS I use for my site is:

input:required:invalid, input:focus:invalid, textarea:required:invalid, textarea:focus:invalid {
  box-shadow: 0 0 0.5em rgba(255, 0, 0, 0.4) inset;
}

This flags errors with a slightly red glow around their edges. It’s subtle, but it’s noticeable. Leaving things like this would mean any empty required fields would get this glow. The isEmpty plugin adds a class on empty to these fields, and we can use that to get rid of the glow:

input, textarea, input:required:invalid.empty, input:focus:invalid.empty, textarea:required:invalid.empty, textarea:focus:invalid.empty {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2) inset;
}

Boom! Error styling is hidden on empty fields.

Some Extra Settings

The isEmpty plugin has a couple of settings you can change. They are:

  1. theClass: This allows you to change the class that is added to better fit your tastes. The default, as mentioned above, is empty.
  2. addOnEmpty: This allows the plugin to readd the class in the event that a user empties a field. By default this is set to 0.

The method for changing either of these settings is pretty easy. When you’re calling the plugin you can pass through your personal options, like the following:

$(function() {
  $('[required]').isEmpty({
    theClass: 'hiddenWarning',
    addOnEmpty: 1
  });
});

You can use as many or as few options as you’d like, as each option has a default defined.

Download

You can download isEmpty over at the Github Repository, but if you just want to download the latest version you can click here.