Validate html text input as it's typed

Question

What\'s the best way of validating an HTML text input as it\'s typed? All ways I know of doing it has some drawbacks:

1. Using $.keypress you only

Answer 1

Here is the code

function validatephone(xxxxx) 
{
  var maintainplus = '';
  var numval = xxxxx.value
  if ( numval.charAt(0)=='+' )
  {
    var maintainplus = '';
  }
  curphonevar = numval.replace(/[\\A-Za-z!"£$%^&\-\)\(*+_={};:'@#~,.Š\/<>\" "\?|`¬\]\[]/g,'');
  xxxxx.value = maintainplus + curphonevar;
  var maintainplus = '';
  xxxxx.focus;
}

<input type="text" align="MIDDLE" size="30" maxlength="20" onkeyup="validatephone(this);" name="contact"/>

Answer 2

This also may be helpful

$(".cssclass").live("input propertychange", function () {
    //Validate goes here
});

Answer 3

You can use the input (FF) and propertychange (all others) events to catch all forms of input including keyboard and rmb cut paste.

http://jsfiddle.net/dFBzW/

$('input').bind('input propertychange', function() {
    $('#output').html($(this).val());
});

Answer 4

function validatephone(xxxxx) 
{
  var maintainplus = '';
  var numval = xxxxx.value
  if ( numval.charAt(0)=='+' )
  {
    var maintainplus = '';
  }
  curphonevar = numval.replace(/[\\A-Za-z!"£$%^&\-\)\(*+_={};:'@#~,.Š\/<>\" "\?|`¬\]\[]/g,'');
  xxxxx.value = maintainplus + curphonevar;
  var maintainplus = '';
  xxxxx.focus;
}

<input type="text" align="MIDDLE" size="30" maxlength="20" onkeyup="validatephone(this);" name="contact"/>

Answer 5

Just for another solution to prevent certain characters, without JQuery...

<input type="text" onkeypress="checkInput(event)" />

...

function checkInput(e)
{
    //only alpha-numeric characters
    var ok = /[A-Za-z0-9]/.test(String.fromCharCode(e.charCode));
    if (!ok)
        e.preventDefault();
}

I don't know if this requires new versions of things or only works on some browsers. Please comment.

Answer 6

In the jQuery world, it's common to leverage plug-ins for these validation tasks. Plug-ins can be relatively easy to use, and their popularity usually reflects in less bugs than code written from scratch.

Input validation is usually split into categories, including:

1) Correct input format / Input mask. for example, only A-Z, or say, 10 digit numbers.

2) Content existence in a domain. For example, airport code or postal codes.

For (1) you can use these relatively popular plug-ins:

Digital Bush's Masked Input Plugin for Jquery. It has many options for customisation including spaces, eg:

from Digital Bush website:

$("#phone").mask("(999) 999-9999");

The autoNumeric from decorplanit.com . They have a nice support for numeric, as well as currency, rounding, etc.

adapted from autoNumeric website:

$('#amountPaid').autoNumeric({aSep: '.', aDec: ','}); // eg, 9.000,00

For (2), you can use, for example, jQuery UI's autocomplete, combined with server resource data, in a format like JSON. These are likely to require custom code to lock input, but you can still leverage plug-ins for the basic functionality, and focus on the specific business logic you are creating.

Some text above adapted from two answers in other posts here and here.