Semantic form feedback

TJ — Sun, 10 Jan 2010 22:57:37 +0000

I recently coded up a contact form from scratch with some valid HTML 4.01, PHP, and jQuery for a website my dad has been working on and came out of the ‘exercise’ with one basic, yet very important tidbit of information regarding semantics.

When using Javascript to give on-the-fly feedback to the user, one may be tempted to do something like:

// with jQuery for legibility and beautifulness
$("#some-input-field").bind("blur", function() {
  var text = $(this).attr('value');    
  if (is_valid(text)) {
    // greenish background / border to tell user input value is valid
    $(this).css({
      'background' : '#BFFEBF',
      'border' : '1px solid #00EE00'
    });
  } else {
    // red colors signify invalid input value
    $(this).css({
      'background' : '#FEBFBF',
      'border' : '1px solid #EE0000'
    });
  }
});

Don’t. CSS should not do anything more than provide styling. Using CSS to give the user feedback is not the right method of doing things. Rather, one should add / remove classes which themselves can be targeted with CSS. This way, the underlying response the Javascript provides are semantic class names. Even if styling is removed, the HTML has meaning.

So, to finish, replace the above code with something like this:

// CSS
.valid { background : #BFFEBF; border : 1px solid #00EE00 }
.error { background : #FEBFBF; border : 1px solid #EE0000 }

// jQuery
$("#some-input-field").bind("blur", function() {
  var text = $(this).attr('value');    
  if (is_valid(text)) {
    $(this).removeClass("error").addClass("valid");
  } else {
    $(this).removeClass("valid").addClass("error");
  }
});

No related posts.

Hello World

TJ — Fri, 11 Dec 2009 07:56:13 +0000

The site just went live (for the third time). Just checking in to say hi. No related posts. No related posts.

TJ Koblentz

Semantic form feedback

Hello World