ValidText: a jQuery text form validation plugin

May 2009

Ignore this page!

The excellent Jörn Zaefferer has written a much better, feature complete jQuery input validation plugin which does the same job as mine originally set out to do.

As far as jQuery plugins go, I'll be the first to admit this is perhaps not like the others.

Unlike most other plugins, it is fair to say ValidText may require a little tweaking to get it doing exactly what you want it to do. That being said, the ability to define your own form validation rules - and the responses to those rules - makes ValidText powerful. If you have any 'non-standard' requirements (maybe you want to validate a string against a strict format, such as an SKU or a date), this could well be the form validation plugin for you.

What it does

  • ValidText does work with <input type="text"> and <textarea> elements
  • ValidText does highlight errors as the user is typing in any way you define
  • ValidText does prevent invalid keystrokes (if it can, if it can't it'll keep quiet nicely)
  • ValidText does allow you to define your own functionality processed as the user makes each keystroke
  • ValidText does NOT natively prevent form submission if any of the form fields are invalid (why?)
  • ValidText does NOT hold your hand. For those brand new to JavaScript, this plugin may not be best for you.

How it works

ValidText uses a concept of "rules" and "actions". The plugin itself is tiny, it is the ability for you to apply your own rules and/or actions to it that is key.

Rules define the allowed format(s) a text input element can accept. A good example of a rule is one which checks if an email address is valid: if the email address entered by the user is OK, the rule passes, but enter an invalid email address and the rule fails. Rules must only return true or false. There are a few example rules listed below which you are welcome to use in your own project or modify as you see fit (though a credit is always welcome).

Actions define what should happen when a rule fails (e.g. show an error message) and what should happen when that rule passes (e.g. hide that error message). Again, there are example actions listed below.

Rules and actions are regular JavaScript objects. ValidText provides convenient placeholders for you to keep your rules and actions called, you guessed it, ValidText.rule and ValidText.action. Define a rule as follows: ValidText.rule.MyNewRule = { ..... } placing your declaration after the plugin itself. Rules and Actions, once declared, can be reused in any combination you see fit.

A Demonstration

Coming soon.

Anatomy of a ValidText Rule:

Rule objects contain three variables: allowpaste, maxlength and dictionary and one function: validate.

ValidText.rule.MyRule = {
    allowpaste: [boolean],          // Can the user paste from the clipboard into the text field?
    maxlength:  [integer],          // Max number of characters a user can enter. Use 0 for unlimited.
    dictionary: [string],           // String of allowed characters the user can type. Use an empty string to allow all characters
    validate:   function(oInput, bFinalState) {
        [your javascript code]      // Code to be executed while the user is typing
        if (bFinalState == true) {
            [your javascript code]  // Code to be executed when the user leaves this text field
        }
    }
}

Anatomy of a ValidText Action:

Action objects contain two functions: invalid and valid.

ValidText.action.MyAction = {
    invalid: function(oInput) {
        [your javascript code]    // Code to be executed when a rule fails
    },
    valid: function(oInput) {
        [your javascript code]    // Code to be executed when a rule passes    
    }
}

Using ValidText:

ValidText accepts a rule and an action as it's two inputs. It is up to you to use the rules and actions listed below or define your own to make your form input work as you wish.

$("#currency").ValidText(ValidText.rule.Currency,
                         ValidText.action.CurrencyError);
$("#emailaddress").ValidText(ValidText.rule.Email,
                             ValidText.action.EmailError);

Example Rules:

Coming soon.

Example Actions:

Coming soon. Do you have a rule or action you've written you'd like to be listed here? Please let me see them.

Why does ValidText allow form submission even if the form fields are invalid?

  • Because it was originally designed to work in an AJAX environment away from traditional <form> submission.
  • Because it is beyond the scope of what this plugin sets out to do.
  • Because you should NEVER rely on client-side form validation. If hacking your website or application is as simple as temporarily turning off JavaScript in a web browser then submitting a form, you are incredibly vulnerable to attack. Whether you use this plugin or not, ALWAYS validate your inputs server-side too.
  • If you do want ValidText to prevent form submission, simply write the relevant code into your 'action' declarations.

You are welcome to download and use this plugin which is distributed under the MIT licence. If you're interested to see other jQuery work I've done, checkout JAWStats web analytics.

Useful stuff:

Code Snippets:

Recommended reading:

Jon Combe