Validation of auto populating fields

Hi Guys,

I’ve got a form which contains some auto populating drop down menus and am trying to get validation so that if the information in the drop down menu is empty that it prompts the user to enter information when they select the submit button.

The code that I have for the form is as follows:

<form action=”www.mydomain.com/cgi-bin/formmail.cgi” method=”post” name=”myform” onSubmit=”return validform(myform)”>
<input type=”hidden” name=”recipient” value=”[email protected]“>
<input type=”hidden” name=”subject” value=”My Form”>
<input type=”hidden” name=”redirect” value=”/confirmation.htm”>
<input type=”hidden” name=”email” value=”[email protected]“>
<input type=”hidden” name=”realname” value=”[email protected]“>

<table border=”0″ cellspacing=”0″ cellpaddng=”1″ width=”85%” align=”left”>
<tr bgcolor=”#FFFFFF”>
<td>
<table border=”0″ cellspacing=”0″ cellpadding=”1″ width=”100%”>
<tr>
<td bgcolor=”#6666CC”><img src=”images/clear.gif” width=”1″ height=”1″></td>
</tr>
</table>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td colspan=”4″ bgcolor=”#E3E3FF” class=”headline7″><b>Personal Details</b></td>
</tr>
<tr>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>Preferred First Name&nbsp;</td>
<td width=”30%” bgcolor=”#E3E3FF” class=”headline7″> <input size=”25″ name=”First_Name” tabIndex=”1″></td>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>Surname&nbsp;</td>
<td width=”30%” bgcolor=”#E3E3FF” class=”headline7″> <input size=”25″ name=”Surname” tabIndex=”2″></td>
</tr>
<tr>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”30%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”30%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
</tr>
<tr>
<td align=”right” bgcolor=”#E3E3FF” class=”headline7″>Telephone Number&nbsp;</td>
<td bgcolor=”#E3E3FF” class=”headline7″> <input size=”25″ name=”tel_number” tabIndex=”3″></td>
<td align=”right” bgcolor=”#E3E3FF” class=”headline7″>Email Address&nbsp;</td>
<td bgcolor=”#E3E3FF” class=”headline7″> <input size=”25″ name=”EmailAddress” tabindex=”4″></td>
</tr>
<tr>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”30%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”30%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
</tr>
<tr>
<td align=”right” bgcolor=”#E3E3FF” class=”headline7″>Site&nbsp;</td>
<td bgcolor=”#E3E3FF” class=”headline7″>
<select name=”Site” tabindex=”5″>
<OPTION value=”Select…” SELECTED>Select…</OPTION>
<OPTION value=”Option 1″>Option 1</OPTION>
<OPTION value=”Option 2″>Option 2</OPTION>
<OPTION value=”Option 3″>Option 3</OPTION>
<OPTION value=”Option 4″>Option 4</OPTION>
<OPTION value=”Option 5″>Option 5</OPTION>
</select>
</td>
<td align=”right” bgcolor=”#E3E3FF” class=”headline7″>Group&nbsp;</td>
<td bgcolor=”#E3E3FF” class=”headline7″>
<select id=”firstChoice” name=”firstChoice” onchange=”selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);” style=”background:#ffffcc” tabindex=”6″>
<option value=”Select…” selected>Select…</option>
<option value=”1″>Group 1</option>
<option value=”2″>Group 2</option>
<option value=”3″>Group 3</option>
<option value=”4″>Group 4</option>
<option value=”5″>Group 5</option>
<option value=”6″>Group 6</option>
<option value=”7″>Group 7</option>
<option value=”8″>Group 8</option>
<option value=”9″>Group 9</option>
<option value=”10″>Group 10</option>
</select>
</td>
</tr>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”30%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”30%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
</tr>
</table>
<table border=”0″ cellspacing=”0″ cellpadding=”1″ width=”100%”>
<tr>
<td bgcolor=”#6666CC”><img src=”images/clear.gif” width=”1″ height=”1″></td>
</tr>
</table>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”1″>
<tr>
<td colspan=”4″ bgcolor=”#E3E3FF” class=”headline7″><b>Approver Details</b></td>
</tr>
<tr>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>Approver Name&nbsp;</td>
<td width=”30%” bgcolor=”#E3E3FF” class=”headline7″ tabIndex=”7″>
<select id=”secondChoice” name=”secondChoice” onchange=”selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);” style=”background:#ffffcc”>
<option value=”Select…” selected>Select…</option>
</select>
</td>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>Approver Email Address&nbsp;</td>
<td width=”30%” bgcolor=”#E3E3FF” class=”headline7″ tabIndex=”8″>
<select id=”thirdChoice” name=”thirdChoice” style=”background:#ffffcc”>
<option value=”Select…” selected>Select…</option>
</select>
</td>
</tr>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”30%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”20%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
<td width=”30%” align=”right” bgcolor=”#E3E3FF” class=”headline7″>&nbsp;</td>
</tr>
<tr>
<td valign=”top” align=”right” bgcolor=”#E3E3FF” class=”headline7″>Justification&nbsp;</td>
<td colspan=”3″ bgcolor=”#E3E3FF” class=”headline7″><textarea tabIndex=”9″ name=”justification” rows=”5″ cols=”75″ bgcolor=”#E3E3FF”></textarea>
</tr>
</table>
<table border=”0″ cellspacing=”0″ cellpadding=”1″ width=”100%”>
<tr>
<td bgcolor=”#6666CC”><img src=”images/clear.gif” width=”1″ height=”1″></td>
</tr>
</table>
<table border=”0″ cellspacing=”1″ cellpadding=”7″ width=”100%”>
<tr>
<td align=”right” colspan=”8″ bgcolor=”#E3E3FF” class=”headline7″><input type=”submit” name=”Submit” value=”Submit the information” tabIndex=”21″>&nbsp;<input type=”reset” name=”Reset” value=”Reset all values” tabIndex=”22″></td>
</tr>
</table>
</td>
</tr>
</table>
</form>

What is happens with this form is that as soon as a user selects an option from the Group field, this automatically inputs data into the secondChoice drop down menu, and then once that has been selected, this populates the thirdChoice dropdown menu.

The validation that I need is for if user selects the firstChoice option, but doesn’t select anything in secondChoice, or thirdChoice for an alert to occur once they select the submit button.

The js code that I have so far is as follows:

<!– begin
function validform(myform) {

if ((document.myform.First_Name.value == ”) || (document.myform.First_Name == null)) {
alert (‘Please enter your Name’);
myform.First_Name.focus();
return false;
}
if ((document.myform.Surname.value == ”) || (document.myform.Surname == null)) {
alert (‘Please enter your Surname’);
myform.Surname.focus();
return false;
}
if (document.myform.firstChoice.value == ‘Select…’) {
alert(‘Please select your Group’);
myform.firstChoice.focus();
return false;
}
if (document.myform.secondChoice.value == ‘Select…’) {
alert(‘Please select your Approver’);
myform.secondChoice.focus();
return false;
}
if (document.myform.thirdChoice.value == ‘Select…’) {
alert(‘Please select the Email address’);
myform.thirdChoice.focus();
return false;
}}

What actually happens is if a user submits the form without any information in, it alerts them to populate information into all the fields, except the secondChoice or thirdChoice fields.

I’d appreciate anyones assistance with this problem.

// End –>

Also in #JavaScript _↴