Frage

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>
War es hilfreich?

Lösung

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!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top