focusMagic jQuery Plugin

September 17th, 2009
|

This plugin is meant to expedite the basic process of making form fields empty or clear on focus and refill on blur, depending on a few specs… a watermark. The three different scenarios that I have built for are represented.

  1. A normal form field watermark that empties on focus and refills on blur.
  2. A value that is set by the server trumps anything that the plugin does. (Note: this way, if a user has to fill out the form again because one of the fields didn’t validate, the server can send values so that the user doesn’t have to refill the whole form)
  3. There may be a time when you want to ignore the plugin and keep your label visible. Just add a ‘ignore’ class to your label and the plugin doesn’t touch it.
  4. This is an extra couple of lines written so that validation works correctly. What it does is it empties the fields that have not been touched by the user on submit. That way, we can run our validation against those fields, and we don’t submit our label.

This solution focuses on accessibility as it does not remove the label, just moves it off the viewport. This way, if a user does not have Javascript, CSS, or uses a screen reader, they will still get normal labels.

View a demo
Download plugin (link to jQuery plugins)

Please let me know what you think about it, or if there is anything I should do to improve.

6 Comments:

  1. Simply want to say your article is astounding. The clearness in your post is simply impressive and i can take for granted you are an expert on this subject. Well with your permission allow me to grab your rss feed to keep up to date with future post. Thanks a million and please keep up the strong work.

  2. I was searching for photography when I found your site. Great post. Thank You.

  3. The only snag I have is when you combine this with the jQuery validation plugin.

    When you click submit, because the (lets say for example) the forename and surname fields have been filled in by focus magic and they also have a required attribute in the validation plugin, then they do get validated even though they are the label values from FM..

    Is there any way that you know of that will remove the FM values just before validation?

    Thanks

  4. Hi Martin,

    I will look into this and get back to you. This is one of the plugins that I use on almost every project so it would definitely be beneficial for me to update it.

    Check back here for the update. Here is a feed for the comments of this post.
    http://feeds.feedburner.com/CommentsOnFocusmagicJqueryPlugin

    Hold tight.

  5. Alright. I have updated the plugin. You can download it at the jquery plugins site from now on:
    http://plugins.jquery.com/project/focusmagic

    You can also see it in action at the demo site:
    http://www.aaronvanderzwan.com/focusmagic/

    Try this out with your validation and let me know if you need any other changes.

    Thanks.

  6. Wow, that was quick Aaron – Thank you so much for this!

    Kind regards

    Martin

Comments have been closed for this post. If you would like to ask a question or need help, please post in the forums.