The code view below uses a text input tag and we’re expecting a non-negative integer for the quantity value. The div tag is a space where we can write a message if necessary.
Checking for numeric values may require a series of tests and steps:
- first trim the value
- if it’s not at all numeric stop and alert the user
- if it is numeric, is it a non-negative number; otherwise alert the user
- if we require integers, round the value
Code view for Checking Numeric Values
This example applies the function chkField(whichObj) to the onblur event of the input field. The function chkField(whichObj) passes execution to testNumeric(whichObj) and expects a return value of true or false - if false, stop and ask the user for valid input. This could be applied as an onsubmit event if the quantity input field were part of a form. If the value entered for quantity is anything other than a positive integer it stops and alerts the user to enter a valid quantity.
Checking for numeric values involves a few steps. We could require validation within a range or as an appropriate date string. We may also want to check for blank fields and trim leading and trailing spaces and linefeeds.
This post is part of the series: Web Design using DHTML and the DOM
Creating web sites with DHTML based on the DOM can increase server performance, lower bandiwdth utilization and solve most cross-browser compatibility issues.
- Validating Input at the Client: Check for blank or required fields
- Validating Input at the Client: trim the field
- Validating Input at the Client: check numeric value fields
- Leveraging CSS Styles
- DOM getElementsByTagName Method for Bulk Element Formating