Unwrongest

Hello, my name is Jan Jarfalk and I'm an interaction designer and interface developer. This, my lab, is where I learn and evolve.

Valid8

Valid8 solves both simple and complex validation scenarios. Everything from a basic required field to regular expressions, ajax requests and arbitrary javascript functions. There is nothing you can’t validate using Valid8.

Valid8 features support for three types of validation techniques; Regular expressions, custom javascript functions and Ajax requests. The three techniques can be combined in any way you want. For example, in a very extreme case, you can use two regular expressions, one javascript function and three ajax requests for validating a single input field.

    Regular expressions
    For determining whether a value matches a regular expresion. For example determining if a user name consists of only letters and numbers.
    Javascript functions
    Send one or multiple values to a custom function. For example checking if the ‘password’ and the ‘confirm password’ input field matches each other.
    Ajax requests
    Post one or multiple values to a external file. For example to see if a user name already exists in the database.

Examples and demos

Valid8 ranges from super simple ‘making an input field required’ to an near endless possibility of complexity. I think the best way for me to describe how Valid8s individual parts is by showing you a set of examples.

    How to make an input field required
    This example will show you how to make an input field required and show the default validation message ‘Required’ if the field is left empty.
    How to make an input field required and show a custom error message
    This example will show you how to make an input field required and show a custom validation message if the field is left empty.
    How to validate with a single regular expression
    This example will show you how to validate using a regular expression that dictates that the input field(s) only can contain letters and numbers.
    How to validate with multiple regular expressions
    This example will show you how to validate using two regular expressions. One that dictates that the input field is required and one that the input field only can contain letters and numbers. Valid8 will show a different validation message depending on which regular expression it violates first.
    How to validate with a javascript function
    This is example will show you how to compare the Password field with the Confirm Password field and make Confirm Passoword invalid if it doesn’t match the Password field.
    How to validate using an ajax request
    This example will show you how to make see if an email address already is in your database.

Example – How to make an input field required

Calling the valid8 method without any arguments will show the default validation error message ‘Required’ if the input field is left empty.

  1.     $('#inputUsername').valid8();

Example – How to make an input field required and show a custom error message

Calling the valid8 method with a string as an argument will show the string as an a validation error message if the input field is left empty.

  1.     $('#inputUsername').valid8('Username is required');

Example – How to validate with a single regular expression

The example below is using a regular expression that dictates that the input field(s) only can contain a-z, A-Z and 0-9. If the value contains for example the character ‘@’ the validation message ‘You can only use the letters A-Z and numbers’ will be shown.

  1.     $('#inputUsername').valid8({
  2.         'regularExpressions': [
  3.             { expression: /^[a-zA-Z0-9]+$/|>, errormessage: 'You can only use the letters A-Z and numbers'}
  4.         ]
  5.     });

Example – How to validate with multiple regular expressions

The example below is using two regular expressions that dictates that the input field(s) not can be empty and only can contain a-z, A-Z and 0-9. If the value contains for example the character ‘@’ the validation message ‘You can only use the letters A-Z and numbers’ will be shown. If the field is left completely empty it will show the validation message ‘Field is required’.

  1.     $('#inputUsername').valid8({
  2.         'regularExpressions': [
  3.      { expression: /^.+$/, errormessage: 'Username is required'},
  4.         { expression: /^[a-zA-Z0-9]+$/|>, errormessage: 'You can only use the letters A-Z and numbers'}
  5.         ]
  6.     });

Example – How to validate with a javascript function

In this example validates the input field ‘#inputPasswordVerification’ and see if it matches the input field ‘#inputPassword’. If it doesn’t match the validation message ‘Passwords does not match’ will be shown.

  1. function doesPasswordFieldsMatch(values){
  2.     if(values.password == values.verification)
  3.         return {valid:true}
  4.     else
  5.         return {valid:false, message:'Passwords does not match'}
  6. }
  7.    
  8. $('#inputPassword').valid8('Password is required');
  9. $('#inputConfirmPassword').valid8({
  10.     'jsFunctions': [
  11.         { function: doesPasswordFieldsMatch, values: function(){
  12.                 return { password: $('#inputPassword').val(), verification: $('#inputConfirmPassword').val() }
  13.             }
  14.         }
  15.     ]
  16. });

Example – How to validate with an ajax request

This example will post the value of the input field ‘#inputEmail’ to isEmailUnique.php.

  1.  $('#inputEmail').valid8({
  2.      'regularExpressions': [
  3.          { expression: /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/|>, errormessage: 'Email is not valid'},
  4.             ],
  5.      'ajaxRequests': [
  6.          { url: 'lib/isEmailUnique.php' }
  7.      ]
  8.  });
  1. $email = $_POST['value'];
  2.  
  3. if(!isEmailUnique($email)){
  4.  $json["valid"] = false;
  5.  $json["message"] = 'Email is already in use';
  6. }
  7. else {
  8.  $json["valid"] = true;
  9. }
  10.  
  11. function isEmailUnique($email){
  12.  // Database look-up should go here here...
  13.  // But for the sake of this demo a random return will do
  14.  return rand(0, 1);
  15. }
  16.  
  17. print json_encode($json);

Change log
VersionChanges
1.3Valid8 now uses triggers instead of callback functions
1.2.2Fixed a bug related to checkbox validation
1.2.1Fixed a bug in IE7
1.2Faster, harder, stronger.
1.1.2Fixed a spelling mistake
1.1.1Fixed a bug where white-spaces would pass the default validation regexp. (Thanks to Srinivas Tamada for reporting the bug)
1.1Changed the variable validationEvent to validationEvents. It can now take both strings (eg. 'keyup') and arrays with strings (eg: ['keyup','blur']).

3 days ago

Twitter Bootstrap 2.0 is here. By nerds, for nerds. Cross everything. http://t.co/J4cFxGlb A neat looking front-end toolkit.

9 days ago

Looking for a solid way to do application versioning? Look no further. http://t.co/OMYJ2xzF Semantic Versioning guidelines are nifty!

15 days ago

On Amazon: Bad reviews are better for product sales than no reviews. (via @ronnestam )

15 days ago

There are only 180k Twitter users in Sweden, but ~75% of Sweden’s journalists use Twitter. (via @ronnestam )