Validate form and change field BGColor if null

AndrewJ1313 · April 13, 2011

I have a script I am using to validate a form with roughly 134 form fields (employment app). It validates perfectly, but on return, I would like to have the background color of any required field change to yellow if it is left null. I have tried several things and each one seems to break the function.

Here is the code I'm using:

<!--
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("list of required fields");
// Enter field description to appear in the dialog box
var fieldDescription = Array("field descriptions to display in alert box");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
	var obj = formobj.elements[fieldRequired[i]];

	if (obj){
		switch(obj.type){
		case "select-one":
			if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "select-multiple":
			if (obj.selectedIndex == -1){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "text":
		case "textarea":
			if (obj.value == "" || obj.value == null){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		default:
		}
		if (obj.type == undefined){
			var blnchecked = false;
			for (var j = 0; j < obj.length; j++){
				if (obj[j].checked){
					blnchecked = true;
				}
			}
			if (!blnchecked){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
		}
	}
}

if (alertMsg.length == l_Msg){
	return true;
}else{
	alert(alertMsg);
	return false;
}
} 
// -->

Any suggestions are appreciated.

Psycho · April 13, 2011

If you could provide that code in a working page with 4-6 sample fields it would be easier for me to provide a solution,

AndrewJ1313 · April 13, 2011

Sure, mjdamato. Here is a sample with this code and several form fields:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<script language="JavaScript">
<!--
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("first_name", "last_name", "home_phone", "cell_phone", "email_address", "street", "city", "state", "zip_code");
// Enter field description to appear in the dialog box
var fieldDescription = Array("First name", "Last name", "Home phone", "Cell phone", "Email address", "Address", "City", "State", "Zip");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
	var obj = formobj.elements[fieldRequired[i]];

	if (obj){
		switch(obj.type){
		case "select-one":
			if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "select-multiple":
			if (obj.selectedIndex == -1){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "text":
		case "textarea":
			if (obj.value == "" || obj.value == null){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		default:
		}
		if (obj.type == undefined){
			var blnchecked = false;
			for (var j = 0; j < obj.length; j++){
				if (obj[j].checked){
					blnchecked = true;
				}
			}
			if (!blnchecked){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
		}
	}
}

if (alertMsg.length == l_Msg){
	return true;
}else{
	alert(alertMsg);
	return false;
}
} 
// --></script>

</head>

<body>
<div id="header">
<p class="clear"></p>
<div class="jg_ea">
        <form action="process_form.php" method="post" name="adminForm" id="adminForm" onsubmit="return formCheck(this);">

        <fieldset><legend>General Information</legend>
        <div id="personal_information_first_name">
                <div>First Name:</div>
                <input type="text" name="first_name" id="first_name" maxlength="250" value = "" />
            </div>
            <div id="personal_information_middle_name">
                <div>Middle Name:</div>
                <input type="text" name="middle_name" id="middle_name" maxlength="250" value = "" />

            </div>
            <div id="personal_information_last_name">
                <div>Last Name:</div>
                <input type="text" name="last_name" id="last_name" maxlength="250" value = "" />
            </div>
            <div id="personal_information_home_phone">
                <div>Home Phone:</div>
                <input type="text" name="home_phone" id="home_phone" maxlength="20" value = "" />

            </div>
            <div id="personal_information_work_phone">
                <div>Work Phone:</div>
                <input type="text" name="work_phone" id="work_phone" maxlength="20" value = "" />
            </div>
            <div id="personal_information_cell_phone">
                <div>Cell Phone:</div>
                <input type="text" name="cell_phone" id="cell_phone" maxlength="20" value = "" />

            </div>
            <div id="personal_information_email_address">
                <div>Email Address:</div>
                <input type="text" name="email_address" id="email_address" maxlength="250" value = "" />
            </div>
            <div><br />
            <input class="submitbutton" type="submit" name="submit" onclick="formCheck(this);" value="Submit" />
            </div>         
           
        </fieldset>  
   </form>
</div>
</body>
</html>

AndrewJ1313 · April 13, 2011

Ahhh, got it figured out. I was missing a key element when I was testing this earlier.

I needed to add a to

document.getElementById(fieldRequired[i]).style.background="Yellow";

and then insert this line within this section:

case "textarea":
  if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
document.getElementById(fieldRequired[i]).style.background="Yellow";
}

I kept trying by using "obj" or fieldRequired but with no .

Psycho · April 13, 2011

Take this for a test drive and see what you think. Breaking out the logic makes this more flexible. Couldn't get the radio buttons colored, but y0u could probably change the color of the containing div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.required
{
   font-weight: bold;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<script language="JavaScript">
<!--
function checkInputObj(inputObj, errorMsg)
{
   if (inputObj)
   {
      var isEmpty = false;
      alert(inputObj.type);
      switch(inputObj.type)
      {
         case "select-one":
            if (inputObj.selectedIndex == -1 || inputObj.options[inputObj.selectedIndex].text == "")
            {
               isEmpty = true;
            }
            break;
         case "select-multiple":
            if (inputObj.selectedIndex == -1)
            {
               isEmpty = true;
            }
            break;
         case "text":
         case "textarea":
            if (inputObj.value == "" || inputObj.value == null)
            {
               isEmpty = true;
            }
            break;
         case undefined:
            var blnchecked = false;
            for (var j = 0; j < inputObj.length; j++)
            {
               if (inputObj[j].checked)
               {
                  blnchecked = true;
                  break;
               }
            }
            if (!blnchecked)
            {
               isEmpty = true;
            }
         default:
         break;
      }
      if(isEmpty)
      {
         errors[errors.length] = errorMsg;
         if(inputObj.type != undefined)
         {
            inputObj.style.backgroundColor = '#cc00cc';
         }
      }
   }
}

//Global var to track errors
var errors = new Array();

function formCheck(formObj)
{
   //Reset errors array
   errors = new Array();

   //Create var to track errors
   var formElements = formObj.elements;

   //Validate required fields
   checkInputObj(formElements['first_name'], 'First name is required');
   checkInputObj(formElements['last_name'],  'Last name is required');
   checkInputObj(formElements['home_phone'], 'Home phone is required');
   checkInputObj(formElements['email_address'], 'Email address is required');
   checkInputObj(formElements['select_one'], 'Select One is required');
   checkInputObj(formElements['select_many'], 'Select Many is required');
   checkInputObj(formElements['radio_grp'], 'Radio group is required');

   if (errors.length > 0)
   {
      // dialog message
      var alertMsg = "The following errors occured:\n";
      for(errIdx=0; errIdx<errors.length; errIdx++)
      {
         alertMsg += ' - ' + errors[errIdx] + '\n';
      }
      alert(alertMsg);
      return false;
   }
   //No errors
   return true;
} 
// --></script>

</head>

<body>
<div id="header">
<p class="clear"></p>
<div class="jg_ea">
        <form action="process_form.php" method="post" name="adminForm" id="adminForm" onsubmit="formCheck(this); return false;">

        <fieldset><legend>General Information</legend>
        <div id="personal_information_first_name">
                <div class="required">First Name:</div>
                <input type="text" name="first_name" id="first_name" maxlength="250" value = "" />
            </div>
            <div id="personal_information_middle_name">
                <div>Middle Name:</div>
                <input type="text" name="middle_name" id="middle_name" maxlength="250" value = "" />

            </div>
            <div id="personal_information_last_name">
                <div class="required">Last Name:</div>
                <input type="text" name="last_name" id="last_name" maxlength="250" value = "" />
            </div>
            <div id="personal_information_home_phone">
                <div class="required">Home Phone:</div>
                <input type="text" name="home_phone" id="home_phone" maxlength="20" value = "" />

            </div>
            <div id="personal_information_work_phone">
                <div>Work Phone:</div>
                <input type="text" name="work_phone" id="work_phone" maxlength="20" value = "" />
            </div>
            <div id="personal_information_cell_phone">
                <div>Cell Phone:</div>
                <input type="text" name="cell_phone" id="cell_phone" maxlength="20" value = "" />

            </div>
            <div id="personal_information_email_address">
                <div class="required">Email Address:</div>
                <input type="text" name="email_address" id="email_address" maxlength="250" value = "" />
            </div>
            <div>
                <div class="required">Select One:</div>
                <select name="select_one"><option></option><option>one</option><option>two</option><option>three</option></select>
            </div>
            <div><br />
            <div>
                <div class="required">Select Many:</div>
                <select name="select_many" multiple="multiple"><option></option><option>one</option><option>two</option><option>three</option></select>
            </div>
            <div><br />
            <div>
                <div class="required">Radio:</div>
                <input type="radio" name="radio_grp" value="1" /> 1<br />
            <input type="radio" name="radio_grp" value="2" /> 2<br />
            <input type="radio" name="radio_grp" value="3" /> 3<br />
            </div>
            <div><br />
         <input class="submitbutton" type="submit" name="submit" value="Submit" />
            </div>
        </fieldset>  
   </form>
</div>
</body>
</html>

Sign In

Validate form and change field BGColor if null

Recommended Posts

AndrewJ1313

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

AndrewJ1313

Link to comment

Share on other sites

AndrewJ1313

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information