Pin Me

Validating Input at the Client: Check for blank or required fields

written by: Carmelo Carbonara•edited by: Linda Richter•updated: 9/30/2008

Checking for blank or required fields and preventing form submission or further processing can be accomplished in DHTML with DOM and JavaScript methods , properties and events.

  • slide 1 of 4

    Introduction

    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.

    Code view

    Username&nbsp;<input name="userName" type="text" id="userName" style="display:block;margin-top:5px;margin-bottom:5px;" onblur=''" />

    <input name="submit" type="submit" id="submit" style="display:block;" value="submit"/>

    <div id="messageDiv" style="margin:5px;"></div>

  • slide 2 of 4

    Set the onBlur

    Case 1: in the tag code

    Here we don't need a script block. Instead, the JavaScript code is written right in the onblur attribute of the text input tag definition.It may be difficlut to see but this is the string:

    ..onblur=' if(this.value=="")

    {this.focus();this.style.background="lightyellow";

    document.getElementById("messageDiv").innerHTML=this.id+" is a required field!"} '

    Code view

    Username&nbsp;<input name="userName" type="text" id="userName" style="display:block;margin-top:5px;margin-bottom:5px;" onblur='if(this.value==""){this.focus();this.style.background="lightyellow";document.getElementById("messageDiv").innerHTML=this.id+" is a required field!"}' />

    <input name="submit" type="submit" id="submit" style="display:block;" value="submit"/>

    <div id="messageDiv" style="margin:5px;"></div>

  • slide 3 of 4
    Page 2 - Validating Input at the Client: Check for blank or required fields: Web Development Articles at BrightHub.comDiscover Web Development articles and technology reviews, such as this 2-page article entitled Validating Input at the Client: Check for blank or required fields at BrightHub.com, a writers community that provides information and insight into how science and technology interacts with and impacts our work, our play, our lives.Validating Input at the Client: Check for blank or required fields, Web Development articles
  • slide 4 of 4

    Case 2: with the Document Object Model (DOM) and JavaScript

    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.

    Code view

    Username&nbsp;<input name="userName" type="text" id="userName" style="display:block;margin-top:5px;margin-bottom:5px;" onblur='' />

    <input name="submit" type="submit" id="submit" style="display:block;" value="submit"/>

    <div id="messageDiv" style="margin:5px;"></div>

    <script language="JavaScript" type="text/javascript">

    function myObj(tagID){return document.getElementById(tagID) ; };

    chkForBlank=function()

    { if(this.value=="")

    {this.focus();this.style.background="lightyellow";myObj("messageDiv").innerHTML=this.id+" is a required field!"}

    };

    myObj("userName").onblur=chkForBlank

    </script>

    These examples above show you how to use JavaScript and the Document Object Model (DOM) to change elements on a page. In this case, to validate form data and display a message to the user.

    Validating input at the client reduces unnecessary round trips to the server and is a cost-effective way of minimizing bandwidth usage and CPU utilization. In addition to checking for blanks, we might want to check formats and trim leading and trailing spaces and extra linefeeds. These topics will be covered in other articles dealing with Web Development. You can visit the Web Development Channel for more articles about using the Document Object Model (DOM) and JavaScript.