Validate Text Field based on Dropdown Value

I’m no expert in Javascript. I found this validation script on the web and have modified it. I’m trying to validate a text field based on the selected value of a drop down. In my specific example, I’ve got items in a drop down – some of which have serial numbers associated with each item. In the event that these “serialized items” are selected from the drop down, the “serial number” text field becomes required.

The values that require serial validation are
[COLOR=”RoyalBlue”]COMPUTER, BATTERY-STANDARD, BATTERY-DOUBLE, ACA, DOCKING STATION-CD, DOCKING STATION-DVD[/COLOR]

Here is the relevant information on the form.

[CODE]
<form onsubmit=”return validateFormOnSubmit(this)” name=”rma_form” method=”POST” action=”/cgi/form_mail.cgi”>
<table id=”rma_information”>
<tr>
<td class=”rma_contact”>RMA item </td>
<td>
<select name=”select_rma”>
<option value=”0″>Please Select</option>
<option value=”Computer”>computer</option>
<option value=”Battery-Standard”>battery – standard</option>
<option value=”Battery-Double Capacity”>battery – double</option>
<option value=”ACA”>ACA</option>
<option value=”Docking Station, CD”>docking station, CD</option>
<option value=”Docking Station, DVD”>docking station, DVD</option>
<option value=”Air/Auto Adapter”>air/auto adapter</option>
<option value=”Case, Belt Clip”>case, belt clip</option>
<option value=”Case, Stronghold”>case, stronghold</option>
<option value=”Case, Executive”>case, executive</option>
<option value=”Other”>other</option>
</select> </td>
</tr>
<tr>
<td class=”rma_contact”>unit serial number </td>
<td><input class=”menu_input” maxlength=”255″ type=”text” size=”33″ name=”unit_sn” /></td>
</tr>

[/CODE]

Here is the Javascript Validation Code that is currently in place. All the validations work properly so far, but I am having a hard time setting the conditional statements to validate the serial number based off of specific values in the drop down “validateUnit”.

This function calls all the validation functions

[CODE]
function validateFormOnSubmit(theForm) {
var reason = “”;

reason += validateFirstName(theForm.first_name);
reason += validateLastName(theForm.last_name);
reason += validateEmail(theForm.email);
reason += validateUnit(theForm.select_rma);
reason += validateSerialNumber(theForm.unit_sn);
reason += validateDescription(theForm.problem_desc);
reason += validateOutofBox(theForm.select_outbox);

if (reason != “”) {
alert(“Some fields need correction:n” + reason);
return false;
}
//alert(“All fields are filled correctly”);
return document.rma_form.submit();

return false;
}
[/code]

‘m thinking that this function should check for each specific dropdown item, then call the function validateSerialNumber if the item selected is a “serialized” item.

[code]
function validateUnit(fld) {
var error = “”;

if (fld.selectedIndex == ‘0’) { //checks to make sure a value is selected
fld.style.background = ‘#cccccc’;
error = “Please select an item to RMA.n”;
} else {
fld.style.background = ‘White’;
}
return error;
}

function validateSerialNumber(fld) {
var error = “”;
var illegalChars = /D/; //allow only numbers

if (fld.value == ”) {
fld.style.background = ‘#cccccc’;
error = “You didn’t enter a Serial Number. n”;
} else if (illegalChars.test(fld.value)) { // checks to make sure only numbers are entered
fld.style.background = ‘#cccccc’;
error = “Your Serial Number contains illegal characters. n”;
} else if (fld.value.length != 11) { // checks to make sure the serial number is 10 digits exactly
fld.style.background = ‘#cccccc’;
error = “Please check the length of your serial number n”;
} else {
fld.style.background = ‘White’;
}
return error;
}
[/CODE]

In the validateUnit function, I had previously added code similar to what is in red. I just added one serial validation for now. No use in adding more if the first one isn’t working.

[code]
function validateUnit(fld) {
var error = “”;

if (fld.selectedIndex == ‘0’) { //checks to make sure a value is selected
fld.style.background = ‘#cccccc’;
error = “Please select an item to RMA.n”;
} [COLOR=”DarkRed”]else if (fld.selectedIndex == ‘computer’ ) {
fld.style.background = ‘#cccccc’;
validateSerialNumber(theForm.unit_sn);[/COLOR]
} else {
fld.style.background = ‘White’;
}
return error;
}
[/code]

Also in #JavaScript _↴