Search code examples
formsvalidationprototypejs

Conditional field validation with Prototype JS


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>

Solution

  • 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!