JavaScript validate 'as you type'
Validate a text box onkeypress, onkeyup, onblur
Try It
Only numbers. Negative allowed at beginning. 2 decimal places allowed.
Source
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.
Overview
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" onblur="extractNumber(this,2,true);" onkeyup="extractNumber(this,2,true);" 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.