JavaScript validate 'as you type'

Validate a text box onkeypress, onkeyup, onblur

Try It

Only numbers. Negative allowed at beginning. 2 decimal places allowed.


Public Domain

The JavaScript in validate2.js is released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.



Client-side formatting can be used to prepare data that's going to be sent server side, but it shouldn't be a substitute for server-side validation. That's because not everyone has javascript enabled, so it's easy to bypass client-side validation.

But it's not pointless. One benefit of javascript validation is it can provide instant feedback to the user, either with a message or by auto-correcting the input. The example on this page does the latter. Since the text box value will be changing as the user is typing, it's important not to ruin usability. For example, the user should be able to go back and make changes.

Example usage

<input type="text"
 onkeypress="return blockNonNumbers(this, event, true, true);" />

blockNonNumbers takes the following arguments

function blockNonNumbers(obj, e, allowDecimal, allowNegative)

extractNumber takes the following arguments

function extractNumber(obj, decimalPlaces, allowNegative)

More examples

Negative / 3 decimal places

onblur="extractNumber(this,3,true);" onkeyup="extractNumber(this,3,true);" onkeypress="return blockNonNumbers(this, event, true, true);"

No negative / 2 decimal places

onblur="extractNumber(this,2,false);" onkeyup="extractNumber(this,2,false);" onkeypress="return blockNonNumbers(this, event, true, false);"

Negative / No decimal places

onblur="extractNumber(this,0,true);" onkeyup="extractNumber(this,0,true);" onkeypress="return blockNonNumbers(this, event, false, true);"

No negative / No decimal places

onblur="extractNumber(this,0,false);" onkeyup="extractNumber(this,0,false);" onkeypress="return blockNonNumbers(this, event, false, false);"

No negative / Unlimited decimal places

onblur="extractNumber(this,-1,false);" onkeyup="extractNumber(this,-1,false);" onkeypress="return blockNonNumbers(this, event, true, false);"

What it does

Character-by-character validation

The point of validating each character as it's entered is to prevent unwanted characters from showing up in the first place (as opposed to showing up then being removed). In this example, character validation is accomplished by using function blockNonNumbers with the input's onkeypress event, which will return either true or false. A return value of false means the last character entered will not show up.

Entire value validation

Sometimes a single character isn't enough to determine if the entire value follows a certain format. The example on this page uses function extractNumber in the onkeyup and onblur events.

Event onkeyup is called after the character has been entered. This means that in some situations (like verifying the number of decimal places), you may see the character appear, then disappear.

Event onblur is called when focus leaves the text box. This will catch attempts at copy/pasting.

These are the events that were chosen for this example, but sometimes it will suffice to only have one event fired. It depends on the needs of the formatting.

About this page: