JavasScript Text Input Primer

The Code

This is only one of many, many, many, many, many, many different ways to validate form fields. There are chapters in books that deal with this topic, but here is one simple way to do it. Of course, you should always remember, nothing beats server side validation for controlling the integrity of data being passed by your forms. Feel free to use some of this code as you need to.

You may display with comments turned On or Off. (While having comments turned on will not effect the code, it will be easier to read once you are familiar with the code. Also, it is less data for your users to download, which of course makes your pages load faster.)

<script type="text/javascript" language="JavaScript">
<!-- hiding from older non-JavaScript aware browsers

	// this function clears the value set for the form element passed to it
	// so long as the value is the default text passed in the variable txt.
	function clearme(fe,txt){
		// check to see that the form element is the default text
		if (fe.value == txt){
			// clear the default text
			fe.value = "";
		}
		return;
	}

	// this function sets default text back to the input field if it is 
	// blank after the users focus leaves the field.
	function resetme(fe,txt){
		// check if the form element is empty
		if (fe.value == ""){
			// set the default text
			fe.value = txt;
		}
		return;
	}

	// this function returns a true/false result based on the presence of copy
	// in the form element passed. this is used by two functions checkvalue() 
	// and verify()
	function isblank(fe){
		// check that the value is not empty
		if (fe.value == "") {
			// its blank
			return true;
		} else {
			// it has data
			return false;
		}
	}

	// this takes a form element and checks to see if there is a value assigned 
	// to it. If it comes back as a blank field, the form element will display 
	// the errormessage variable to the user
	function checkvalue(fe, msg) {
		// call the isblank() function with this form element
		if (isblank(fe)){
			// display the error to the user
			alert(msg);
			// set focus on the element we just checked
			fe.focus();
		}
		return;
	}

	// this function is for validating an entire form for blank entries. The
	// error message that is displayed must be short enough to fit in users 
	// windows and get across the idea that there are problems. The benefit
	// of this function is its ease of use, because you simply pass it the 
	// form, a list of required fields and an error message to display. The 
	// function handles all of the logic of submitting the form.
	function verify(frm, fields, msg){
		// get fields marked required
		fieldarray = fields.split(",");
		// loop through all the elements on the form
		for (i=0; i<frm.elements.length; i++){
			// loop through each of the required fieldnames
			for (j=0; j<fieldarray.length; j++){
				// if a field is required (and we're processing that field) and its blank
				if (  fieldarray[j] == frm.elements[i].name &&
				      isblank(frm.elements[i])
					) {
					// display an error
					alert(msg);
					// set the cursor to he field that threw the error
					frm.elements[i].focus();
					// block the form from submitting
					return false;
				} 
			}
		}
		// exit clean and allow form to submit
		return true;
	}

// stop hiding from older non-JavaScript aware browsers -->
</script>

Examples

Single Form Input

Just a single element, requires the element to become active at some point to work.

<form name="example" action="#example" method="post">
	Field 1: <input type="text" name="field1" value="default copy" 
				onfocus="clearme(this, 'default copy');" 
				onblur="checkvalue(this, 'You need to provide input in this text area');
						 resetme(this, 'default copy'); "> 
			<input type="submit" name="button" value="Go">
</form>

This code yields the following example, feel free to try it.

Multi Element Input / Whole Form Validation

In this example both fields are required, however, because field2 is pre-populated with "default copy", the verify function can not verify that it has not been changed.

<form name="example2" action="#example" method="post" 
		onsubmit="return verify(this, 'field1,field2', 
					'Some fields were left blank, please review your form and try again.');">
	Field 1: <input type="text" name="field1" value=""><br />
	Field 2: <input type="text" name="field2" value="default copy" 
				onfocus="clearme(this, 'default copy');" 
				onblur="checkvalue(this, 'You need to provide input in this text area');"> 
			<input type="submit" name="button" value="Go">
</form>

This code yields the following example, feel free to try it.

Another drawback of the whole form validation is the user doesn't get meaningful feedback as to which fields they have left blank, this can be a problem on longer forms.

Copyright (C) 2000-2010, Erik Giberti (AF-Design), All rights reserved.

Program as used in this license may refer to entire software packages, code snippets and binary image or visual information.

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA