nexpace.com

Form Validation

Below are 5 different examples of inline form validation

These are the forms used in the Inline Validation in Web Forms Article by Luke Wroblewski. Also available for download are the 7 iterations I went through in getting to the final form validation prototypes used for testing bugs and all :).

There is also a small PHP snippet to do some very basic password strength metering. All the other types of validation are handled in JavaScript using YUI 2.6.0.

• Test auto-validation version A

  (Validation shows up upon exit of field and then fades away)

• Test auto-validation version B

  (Validation shows up upon exit of field and stays)

• Test auto-validation version C

  (Validation shows up on entry of field and stays)

• Test auto-validation version D

  (Validation shows up inside the field upon exit and stays)

• Test validation control version

  (Validation shows up upon submit)

PHP - Simple Password Strength

if (!empty($_GET['pass'])) {
  $password = urldecode($_GET['pass']);
  $strength = 0;
  if (strlen($password) >= 5) {
    // letters (lowercase)
    if(preg_match("/([a-z]+)/", $password)) {
      $strength++;
    }
    // letters (uppercase)
    if(preg_match("/([A-Z]+)/", $password)) {
      $strength++;
    }
    // numbers
    if(preg_match("/([0-9]+)/", $password)) {
      $strength++;
    }
    // non word characters
    if(preg_match("/([\W]+)/", $password)) {
      $strength++;
    }
  }
  echo $strength;
}else{
  echo 'fail';
}

Assets

Download the files for the final version
Download the files for version 6
Download the files for version 5
Download the files for version 4
Download the files for version 3
Download the files for version 2
Download the files for version 1

The final version can also be found in the resources section