Simple Field Validator/Highlighter

This is a simple script that will highlight required fields on a form. It requires no libraries and is just one simple function that accepts an array of field id’s that are required.

Code:

function checkRequiredFields(fieldIdsArray){

	var fields = fieldIdsArray;
	var errorThrown = false;

	for (var i = 0; i < fields.length; i++){
		var obj = document.getElementById(fields[i]);
		if (obj.value == '' || obj.value == null){
			obj.style.border = '1px solid red';
			obj.onfocus = function(){ this.style.border = '1px solid #999999'};
			errorThrown = true;
		}
	}

	if (errorThrown){
		alert('Please fill in required fields.');
		return false;
	}

	return true;

}

Example:

var requiredFields = new Array('field_1', 'field_2');

function checkRequiredFields(fieldIdsArray){

	var fields = fieldIdsArray;
	var errorThrown = false;

	for (var i = 0; i < fields.length; i++){
		var obj = document.getElementById(fields[i]);
		if (obj.value == '' || obj.value == null){
			obj.style.border = '1px solid red';
			obj.onfocus = function(){ this.style.border = '1px solid #999999'};
			errorThrown = true;
		}
	}

	if (errorThrown){
		alert('Please fill in required fields.');
		return false;
	}

	return true;

}

<input type="text" name="field_1" id="field_1">
<input type="text" name="field_2" id="field_2">
<input type="button" onclick="checkRequiredFields(requiredFields);">
OR
<input type="button" onclick="checkRequiredFields(['field_1','field_2']);">
  1. No comments yet.

  1. No trackbacks yet.