JavaScript: Validate Numeric
Introduction
Author: Martin WarningYear: 2007
License: Free
This example function will validate a form field as being numeric. In this case it will display an error message to the user, but you could use it in different ways as well. Be aware though that JavaScript validation only works when the user has JavaScript enabled to you should always implement a server side validation (using ASP, PHP, JSP, etc.) when saving form values to a database.
Code
Languages:- CSS
- JavaScript
- XHTML
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function ValidateNumeric(strFieldValue) {
intAllowedValues="0123456789"
// Check field value length
if (strFieldValue.length<1) {
// Here you can put code to be executed when field has no value
alert('Please fill something in this field')
}
else
{
for(i=0; i<strFieldValue.length; i++)
{
// check if field has non-numeric values and mark error
if (intAllowedValues.indexOf(strFieldValue.charAt(i))<0)
{
// Field contains non-numeric values so show error
alert('Please enter only numeric values')
break;
}
else {
// in case field is numeric, so it clears the error
// Here you could put code to execute when the value is correct (like clearing error message from the form)
}
}
}
}
// End -->
//]]>
</script>
The following is the form:
<form name="frmValidate">
<input type="text" name="numericfield" onblur="ValidateNumeric(document.frmValidate.numericfield.value);" />
</form>
Put the JavaScript function in the <head> area of the document. To call the function we need to pass the fields value (which allows for multiple fields to use this function to validate if they are numeric. We pass the value with document.frmValidate.numericfield.value and we call the function when the user shifts focus from this field to another field or page element.
Another example:
<script language="JavaScript" type="text/javascript">
//<![CDATA[
function ValidateNumeric(strFieldValue,strFieldName,strFieldNameArea,strErrorMsg) {
intAllowedValues="0123456789"
// fields are allowed to have no value, so the error is cleared
if (strFieldValue.length<1) {
document.getElementById(strFieldNameArea).style.background='';
document.getElementById(strFieldNameArea).style.color='#000000';
document.getElementById(strErrorMsg).style.visibility = 'hidden';
}
else
{
for(i=0; i<strFieldValue.length; i++)
{
// check if field has non-numeric values and mark error
if (intAllowedValues.indexOf(strFieldValue.charAt(i))<0)
{
document.frmValidate[strFieldName].focus();
document.getElementById(strFieldNameArea).style.background='#ff6666';
document.getElementById(strFieldNameArea).style.color='#ffffff';
document.frmValidate[strFieldName].value='';
document.getElementById(strErrorMsg).style.visibility = 'visible';
break;
}
else {
// in case field is numeric, so it clears the error
document.getElementById(strFieldNameArea).style.background='';
document.getElementById(strFieldNameArea).style.color='#000000';
document.getElementById(strErrorMsg).style.visibility = 'hidden';
}
}
}
}
// End -->
//]]>
</script>
The following is the form:
<form name="frmValidate">
<div id="numericfield_err">
<div class="fieldlabel2"><label for="numericfield">Padding:</label></div>
<input type="text" name="numericfield" id="numericfield" size="4" maxlength="4"
onblur="ValidateNumeric(document.frmValidate.numericfield.value,'numericfield','numericfield_err','numericfield_errtxt');" />
<span class="hiddenerror" id="numericfield_errtxt">Only numeric values allowed</span>
</div>
</form>
And the CSS class
.hiddenerror{padding-left:10px;visibility:hidden;color:#ffffff;font-weight:bold;}
This code is slightly more complex, but allows a better way of informing the user about the error. Besides showing the error in a formatted way the code also sets focus back to the field with document.frmValidate[strFieldName].focus(); and deletes the incorrect value from the field with document.frmValidate[strFieldName].value='';. The hiddenerror CSS class is used to hide the error messages when the user enters the page and document.getElementById(strErrorMsg).style.visibility = 'visible' is used to unhide this message. Furthermore this code allows for null value for the field so when a null value is left in the field the error is cleared.
example.zip
