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"); } });