Coldfusion cfform validation for hidden fields

Question

I have a form with a select box with some options. if the user selects Other option, it will display the hidden text field in which user has to enter his choice. Both the form fields are required fields. But the validation fails when i select any other options other than 'Other'. Can some one help me?

The code is given below:

<script >
 function opnSelect() {
      var opval = document.test_form.opns.value;
      if (opval == "Other") {

         // document.getElementById('td_options').style.display='none';
          document.getElementById('td_opns1').style.display="";
      }
      else if(opval!="Other"){

        document.getElementById('td_opns1').style.display='none';
      }

 }
</script>
<cfform name="test_form">
<table>
 <tr>
  <td width="120" align="right"><font color="#FF0000"><b>Please select from options</b></font></td>

    <td align="left" id="td_options">
        <cfselect size="1"  style="width:150px" name="opns" id="opns" required="true"   message="Please select any value" onchange="javascript:opnSelect();">
            <option value="" ></option>
            <option value="value1">value1</option>
            <option value="value2">value2</option>
            <option value="value3">value3</option>
            <option value="Other">Other</option>
         </cfselect>
    </td>

</tr>
 <tr id="td_opns1" style="display:none;"  >
   <td align="right"><b><font color="#FF0000"> your choice</font></b></td>
   <td align="left" >
    <cfinput type="text" name="opns1" id="opns1"  required="true"  message="Please enter your choice" >
 </td>
 </tr>
 </table>
<cfinput type="submit" value="submit" name="submit1">

Answer 1

I think the easiest solution may be to add a default value for opns1 to satisfy the required condition for when something besides "other" is selected.

<cfinput type="text" name="opns1" id="opns1" value="other"  required="true"  message="Please enter your choice" >

In your JS if (opval == "Other") condition add

document.getElementById('opns1').value=""; // to clear "other" from the input.

in your form handler, check to make sure opns1 neq "other"

<cfif form.opns1 neq "other">
  do something with the new value
</cfif>