Ask the CSS Guy

Stijn writes:

Now I ran into a site a while ago that had a basic form with a gray border, if I would enter a correct contents the outline would be green, if I would enter something like: fake@fakemail as the contact mail address the outline would be red. I really like this effect but can’t seem to find a tutorial on it. Maybe you have a good solution?

I'm not sure if we can check if the email address is a real email address on the fly, but I think I get what you're asking.

As someone is typing an in an input field, it would be nice give feedback to the user as they are typing if they have satisfied that field's validation criteria. This article will explain one way of achieving this effect using JavaScript and CSS.

Go straight to the final example to see it in action, and to download a zip of the html, css, js, and images used.

Stijn's question asked about changing the border color of the text input. I'm going to describe a different feedback mechanism here (changing the fieldset) because some browsers, namely Safari, don't care much for borders on text inputs.

Start at the beginning - testing for length

Let's start with field for creating a username.

<fieldset>
  <label for="username">Create a Username:</label>
  <input
    type="text"
    id="username"
    maxlength="16" />
</fieldset>

For our form, in order for the username to be valid, it should be at least 8 characters long, and no more than 16 characters. The maxlength attribute in the HTML takes care of the high limit. As for the low limit, that's where we can introduce some JavaScript.

JavaScript

In English: The function tests to see if the length of what I typed is greater than 7 characters. If so, do something. If not, do something else.

function checkUsername(whatYouTyped) {
  var txt = whatYouTyped.value;
  if (txt.length > 7) {
    ... do something to indicate job well done ...
  } else {
    ... do something else ...
  }
}

As for what to do, what if we took the containing fieldset and changed it's class to something like "welldone"?

function checkUsername(whatYouTyped) {
  var fieldset = whatYouTyped.parentNode;
  var txt = stringinput.value;
  if (txt.length > 7) {
    fieldset.className = "welldone";
  } else {
    fieldset.className = "";
  }
}

The class can be defined in the CSS to assign a background color to the fieldset.

fieldset.welldone {
  background:green;
}

We need to check for this validation on every keystroke, so we attach it to the HTML using onkeyup, like so:

<fieldset>
  <label for="username">Create a Username:</label>
  <input
    type="text"
    id="username"
    maxlength="16"
    onkeyup="checkUsername(this);" />
</fieldset>

View Example 1 - checking for input length.

A step further to indicate "almost there".

We'll also have people create a password. We're a good company, so we let them create a password with as little as 4 characters. But we also feel a sense of responsibility to encourage (not impose upon) people to use longer passwords, at least 8 characters, as a security measure.

The HTML for the password field will look like this:

<fieldset>
  <label for="password">Create a password:</label>
  <input
    type="password"
    id="password"
    onkeyup="checkPassword(this);" />
</fieldset>

The JavaScript will be modified to serve an additional outcome based on length.

• If the password is at least 4 characters long, that's good enough to continue.
• If the password is at least 8 characters long, that's even better, because it's oh-so-very secure.

function checkPassword(whatYouTyped) {
  var fieldset = whatYouTyped.parentNode;
  var txt = whatYouTyped.value;
  if (txt.length > 4 && txt.length < 9) {
    fieldset.className = "almostthere";
  }
  else if (txt.length > 8) {
    fieldset.className = "welldone";
  }
  else {
    fieldset.className = "";
  }
}

View Example 2: checking for various input lengths.

Validating against regular expressions

If your password required letters AND numbers AND special characters, things get a little more complicated. You can't just test for length anymore, you have to match the input to a certain pattern.

Same for email addresses, which follow a certain pattern: blah@blah.blah.

Now I'm no regular expression expert. The one I'm about to use in the next example is not necessarily one I put my stamp of approval on. Basically, I did a quick google search and pulled up the first regular expressions that worked to get the point across.

Here's the HTML for the email input:

<fieldset>
  <label for="email">Enter your email address:</label>
  <input
    type="text"
    id="email"
    onkeyup="checkEmail(this);" />
</fieldset>

And here's the JavaScript, which matches the input text to a regular expression, and changes our fieldset class accordingly.

function checkEmail(whatYouTyped) {
  var fieldset = whatYouTyped.parentNode;
  var txt = whatYouTyped.value;
  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
    fieldset.className = "welldone";
  } else {
    fieldset.className = "";
  }
}

View Example 3: testing against a regular expression.

Make it prettier

We've shown some butt ugly validation hints so far - it'd be nice to do something a little prettier. Remember Form Field Hints? Here's an example to show how the validation hint concept can build nicely upon the Form Field Hints concept.

View Final Example: Validation Hints with Form Field Hints