Question

I have the below code which has a dropdown. the dropdown appears only when the other option is selected. i want to do validation that checks only when the other option is selected to validate the field is not blank

this line works for the validation but also pops up when box is hidden so looking for an extra check. I have my attempt at the bottom but there must be a better nifty way that works. thanks

if(!blank('otherprodtypebox[<xsl:value-of select="@id"/>]')){alert("Please enter a valid other option");return false;}

<script type="text/javascript">
function myOtherBox(e, id) {
    if (e.value == 'otherprodtype')
    {
        $('#myBox_' + id).show();
    }
    else
    {
        $('#myBox_' + id).hide();
    }

}
</script>


<tr>
    <td class="Label">Product Type</td>
    <td class="field">
        <select name="producttypes">
            <xsl:attribute name="onchange">myOtherBox(this, '<xsl:value-of select="@id"/>'); checkBoxVisible(this, '<xsl:value-of select="@id"/>')</xsl:attribute>
            <xsl:attribute name="id">producttypes_<xsl:value-of select="@id"/></xsl:attribute>

            <option value="a">
                <xsl:if test="producttypes/option[@id='a']='selected'">
                    <xsl:attribute name="selected"/>
                </xsl:if>A</option>
            <option value="b">
                <xsl:if test="producttypes/option[@id='b']='selected'">
                    <xsl:attribute name="selected"/>
                </xsl:if>B</option>
            <option value="otherprodtype">
                <xsl:if test="producttypes/option[@id='otherprodtype']='selected'">
                    <xsl:attribute name="selected"/>
                </xsl:if>Other</option>
        </select>
    </td>
</tr>
<tr style="display:none;">
    <xsl:attribute name="id">myBox_<xsl:value-of select="@id"/></xsl:attribute>
    <td class="Label">Other</td>
    <td>
        <input class="amdInputText" type="text" id="otherprodtypebox" value="">
              <xsl:attribute name="value"><xsl:value-of select="otherprodtypebox"></xsl:value-of></xsl:attribute>
        </input>
    </td>
</tr>



if($('#myBox_' + id).validate({ ignore: ':hidden' });) { if(!blank('otherprodtypebox[<xsl:value-of select="@id"/>]')){alert("Please enter a valid other option");return false;} }

Answer 1

Use a class for validation. That is, validate a class called, e.g., .validator.

In your JS:

function myOtherBox(e, id) {
    if (e.value == 'otherprodtype')
    {
        $('#myBox_' + id).show().addClass('validator');
    }
    else
    {
        $('#myBox_' + id).hide().removeClass('validator');
    }
}

EDIT: Alternately, you can use this as your selector instead of the above:

  if($('#myBox_' + id + ':visible').....................etc

That’d be better.