Question

在某种情况下，我们有一个下拉列表可供选择值，还有other选项可在文本输入字段中指定值。

每当选择other选项时，都会显示一个文本字段，然后我希望对其进行验证。

select是：

<select class="form-control" name="amount_sch" id="amount_sch">
    <option value="" selected>Please Select</option>
    <option value="1000">1000</option>
    <option value="2000">2000</option>
    <option value="othr_amt">Other, Please Specify</option>
</select>

input是：

<input type="text" id="amount_sch_other" name="amount_sch_other"
 class="form-control no-extras" placeholder="Enter Amount" 
 style="display:none;"/>

显示/隐藏的JQuery：

$("#amount_sch").change(function() { 
  if ( $(this).val() == "othr_amt") {
    $("#amount_sch_other").show();  
  }
  else{
    $("#amount_sch_other").hide();  
  }
});

rules ...

中的

.validate()选项

amount_sch : {
    required : true,
}

有了这个，只验证select，但如果text字段可见，我怎样才能验证它？

Answer 1

默认情况下，jQuery Validate插件会动态忽略任何隐藏字段的验证。因此，您只需要为文本框声明验证规则，并让插件自动执行其操作。

rules: {
    amount_sch: {
        required: true,
    },
    amount_sch_other: {
        required: true,
    }
}

每当显示文本字段时，它都会被验证;当它被隐藏时，它将无法验证。

DEMO：http://jsfiddle.net/Lcdexmwc/

Answer 2

默认情况下，jQuery validate插件会忽略所有隐藏元素。

对于您的情况，即使您将字段设置为必需，如Sparky所述。要么只需添加ignore: []即可推送插件以验证表单中的所有隐藏元素。

$form.validate({
    ignore: [],
...

验证onchange输入字段jQuery Validate插件

2 个答案: