jQuery AlphaNumeric

by Paulo P. Marinas

Sponsored by IT Group, Inc.

Did you ever have the need to prevent users from entering certain characters into your form?

Looking at the plugins available at jQuery, I found a great plugin made by Sam Collet called Numeric.

But it was too limited, what if I'm asking the user to create a username? Or what if I need to enter a number with decimals or an IP Address? There is another great plugin called Masked Input by Josh Bush, which can also control user input by defining a mask. The problem however with that was the length of text to be inserted must be defined as well. Again, what if I needed to control input of a username? I can't tell how many characters the user will be using, and I can't force him to use just 8 characters ,so I created AlphaNumeric.

jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas. Have fun.

You can download the plugin and these examples here

Examples

  1. Allow only alphanumeric characters + Toggle Code
    $('.sample1').alphanumeric();
  2. Allow only alphanumeric characters, and some exceptions like dot(.), comma (,) and space + Toggle Code
    $('.sample2').alphanumeric({allow:"., "});
  3. Allow only lowercase alpha characters + Toggle Code
    $('.sample3').alpha({nocaps:true});
  4. Allow only numeric characters + Toggle Code
    $('.sample4').numeric();
  5. Allow only numeric characters, and some exceptions like dot (.) + Toggle Code
    $('.sample5').numeric({allow:"."});
  6. Make a custom rule and define only certain characters to prevent, like dot (.), one (1), and a (a) + Toggle Code
    $('.sample6').alphanumeric({ichars:'.1a'});

API Functions

  1. alphanumeric - allow both alphabet and numeric characters
  2. alpha - allow only alphabet characters
  3. numeric - allow only numeric characters

API Properties

  1. allow - add excempted characters to the rule of prevention
  2. ichars - define a custome set of characters to prevent
  3. allcaps - allow only capital letters to be entered
  4. nocaps - allow only lowercase characters to be entered