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

【问题标题】：Conditional field validation with Prototype JS使用 Prototype JS 进行条件字段验证
【发布时间】：2014-02-13 18:13:41
【问题描述】：

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

表格：

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

【问题讨论】：

标签： forms validation prototypejs

【解决方案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">

相当简单！

【讨论】：