Validating Input at the Client: check for blank required fields
The code below is for a text input field, a submit button and a DIV tag that we could use in lieu of an alert box for notifying the user that the input field is required. The code uses the onblur event to determine if the input box is blank and notify the user that this is a required field.
Note: The style properties in this example are set for convenience but are not required.
Username <input name=“userName” type=“text” id=“userName” style=“display:block;margin-top:5px;margin-bottom:5px;” onblur=’’" />
Set the onBlur
Case 1: in the tag code
document.getElementById(“messageDiv”).innerHTML=this.id+" is a required field!"} '
The code below uses the getElementById(tagID) DOM method and assigns onblur as an anonymous function object. This is useful in checking for several required fields being blank and alerting the user. Here’s what the code looks like in Code View (HTML View). You can switch to Display View to see what it looks like to the user.
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