jQuery Validate - 从选择中获取值并根据值使文本输入为必填字段答案

【问题标题】：jQuery Validate - Get value from select and based on the value make text input required fieldjQuery Validate - 从选择中获取值并根据值使文本输入为必填字段
【发布时间】：2015-05-12 09:27:22
【问题描述】：

我有一个带有 3 个选项“空白”、“是”和“否”的选项的表单。我也有一个文本输入，这是这种情况的一部分。

我的 HTML 如下（摘录）：

<div class="row">
  <div class="col-sm-4 col-md-4">
   <select class="form-control" id="medical" name="medical" onchange=" if(this.value == 'medyes') { document.getElementById('medcon-text').style.display = 'block'; } else { document.getElementById('medcon-text').style.display = 'none';} ">
    <option value="Select an option"></option>
    <option value="medyes">Yes</option>
    <option value="medno">No</option>
   </select>
  </div>
<!--close medical select--> 
</div>
<div class="row">
   <div class="col-sm-12 col-md-12">
     <div id="medcon-text" style="display:none;">
       <label class="control-label">If so please specify:</label>
       <input type="text" class="form-control" id="medicaltext" name="medicaltext" placeholder="Enter your disability or medical condition">
     </div>
   </div>
   <!--close medical condition--> 
 </div>
 <!--close row-->

jQuery 验证代码（摘录）：

$("#online-application").validate({


    rules: {
        medical: {
            required: true
        },
        medcon: {
            required: $("#medical").val() == "medyes"
        },
    },

    messages: {
        medical: "Please select an option.",
        medicaltext: "Please enter your medical condition.",
    },

我的问题是，如何使选择成为必填字段，如果选择值为“是”/“medyes”，则将医学文本输入为必填字段。但是，如果选择值为 no 或空白，则不需要进行医学文本输入。

【问题讨论】：

请查看rules 选项的depends 属性的文档。

标签： jquery html twitter-bootstrap jquery-validate

【解决方案1】：

您需要将返回true/false 的function() 与depends 属性结合使用。

rules: {
    medical: {
        required: true
    },
    medicaltext: { // <- NAME attribute of the input
        required: {
            depends: function() {
                return ($("#medical").val() == "medyes");
            }
        }  
    },
},

在.validate() 方法中，只能使用每个输入元素的name 属性来分配规则。由于我没有看到任何带有name="medcon" 的输入，因此需要将其更改为与文本输入元素上的name 匹配。

请参阅depends 的文档：jqueryvalidation.org/validate/#rules

要让required 处理select，您还需要更改此行...

<option value="Select an option"></option>

进入这个...

<option value="">Select an option</option>

演示：http://jsfiddle.net/34oo7nrg/

【讨论】：

关于您的编辑，我在浏览代码时看到了这一点。再次感谢。