I have a form with two fields, a drop-down list and a text box. Both drop-down and text box are mandatory but with one exception that if user selects "Other" the text-box will not be mandatory and will not show asterisk.
Form:
<form method="post" id="configForm" action="">
<div class="field">
<label class="required" for="type"><em>*</em>Type</label>
<div class="input-box">
<select name="type" class="required-entry">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="field">
<label class="required" for="price"><em>*</em>Price</label>
<div class="input-box">
<input type="text" value="" name="price" class="required-entry">
</div>
</div>
</form>
Script:
<script type="text/javascript">
//< ![C
var Form= new VarienForm('configForm', true);
//]]>
</script>
Its feels awkward while answering my own question but as I solve it myself so posting because it may help someone else.
<script type="text/javascript">
//< ![C
Validation.add('conditional-required', 'This is a required field.', function(v) {
var type = $('type').getValue();
if(type == 'Other')
{
return ( (v != "none") && (v != null) && (v.length != 0));
}
else
{
return true;
}
});
//]]>
</script>
Add id type
to dropdown list
<select name="type" class="required-entry" id="type">
Add class conditional-required
to text field
<input type="text" value="" name="price" class="conditional-required">
Fairly Simple!