Question

我有一个包含两个字段的表单，一个下拉列表和一个文本框。下拉列表和文本框都是必填项，但有一个例外，即如果用户选择“其他”，则文本框不是必需的，也不会显示星号。

形式：

<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 type="text/javascript">
    //< ![C
    var Form= new VarienForm('configForm', true);
    //]]>
</script>

Answer 1

在回答我自己的问题时感觉很尴尬，但我自己解决这个问题，所以发帖是因为它可以帮助别人。

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

将ID type添加到下拉列表

<select name="type" class="required-entry" id="type">

将班级conditional-required添加到文字字段

<input type="text" value="" name="price" class="conditional-required">

相当简单！

使用Prototype JS进行条件字段验证

1 个答案: