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']);">


No comments yet.