Hack 22. Validate a Text Field or textarea for Blank Fields | Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Spare the network an unnecessary hit if the user leaves any required form fields blank.

No web developers want their Ajax applications to hit the network with requests if the users leave necessary text fields blank. Thus, checking that input elements of type text and the large boxes called textareas in HTML contain values is one of the most common forms of validation.

This hack shows the code for checking if a text control is blank. The inline way of doing this is by assigning a check for the field's value in the text field's event handler:

<input type="text" name="firstname"  onblur= "if (this.value) {doSomething(  );}" />

or in the textarea's event handler:

<textarea name="tarea" rows="20"  cols="20" onblur= "if (this.value) {doSomething(  );}">

The JavaScript phrase if (this.value) {...} returns false if the user leaves a field blank, so the function call doSomething( ) will never occur. JavaScript evaluates a blank web-form text field as the empty string or "", which evaluates to false when it's used in the context of a programming test. The this keyword is a nice generic way of referring to the form field that contains the event handler attribute. For example, onblur. this.value returns the text field's value, which in our case is the empty string.

onblur captures the event involving the transfer of keyboard focus away from a form field. For example, users trigger onblur event handlers when they type in a text field and then click in another form field or press the Tab key.

If you use the onchange event handler, the browser calls the onchange-related function only if the field's value changes. In other words, the change event will not capture an instance if the user leaves the text field blank.

Separating the Logic from the View

Probably a better way of going about your event-handling tasks is to separate the logic of your code from the HTML or template text that comprises the application's visual aspects. The JavaScript goes into an external file that the HTML page imports with a script tag. Inside the external file, the code binds a field's various event handlers to a function or the code that represents your application's behavior.

Let's take the following web page, myapp.html, which includes the following HTML in its header:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>     <meta http-equiv="content-type" content="text/html; charset=utf-8" />     <script type="text/javascript" src="/books/4/254/1/html/2/js/hacks_method.js"></script>     <title>Cool Ajax application</title> </head>

The file hacks_method.js is located in a directory js, which is in the same directory as the HTML file. The HTML file contains the same textarea and text field as mentioned earlier, except these fields no longer have an onblur attribute. The JavaScript file includes this code:

window.onload=function(  ){     var txtA = document.getElementById("tarea");     if(txtA != null){         txtA.onblur=function(  ){             if (this.value) { doSomething(  );}         };     }     var tfd = document.getElementById("tfield");     /* An alternative:     if(tfd != null && txtA != null){tfd.onblur = txtA.onblur; }     */     if(tfd != null){         tfd.onblur=function(  ){             if (this.value) { doSomething(  );}         };     } }

window.onload involves the binding of the load event to your blank-field checks. load occurs when the browser has completed loading the web page, so when that happens, all the stuff after window.onload= follows.

The getElementById( ) method returns a reference to an HTML element, such as the textarea reference stored in txtA. The code then binds the textarea's onblur event handler to a function, which checks for blank field values before it calls doSomething( ). The code initiates the same behavior for the text field referred to by the variable tfd.

If the web designers leave out the text fields with the id tarea or tfield, nothing will happen because the getElementById( ) method returns null, and the code includes a check for that occurrence.

Another way to bind an event handler to a function is to declare the function somewhere and then use the function name:

window.onload=function(  ){     var txtA = document.getElementById("tarea");     txtA.onblur=doSomething;//no parens... } function doSomething(  ){ //... }

When the code binds an event handler to a previously defined function, leave the parentheses off the function name.

Programmers often consider placing the definition of the blank-field checks and other coding stuff in an external file to be a better way of organizing any but the most trivial web applications.