隐藏后BootstrapValidator不验证可见域

Question

我有一个表单，它隐藏了一些输入字段，根据特定的选择，这些隐藏字段是可见的。但是，当我希望对它们进行验证时，BootstrapValidator将不会验证它们。

我组装了一个JSFiddle；http://jsfiddle.net/FLz6B/1/

我知道，为了让BootstrapValidator验证隐藏字段，您需要定义“排除”元素，如下所示；

$('#loginform').bootstrapValidator({
    excluded: [":disabled"]
}); 

但是，如果我在我的页面上使用它，它将尝试验证隐藏的字段，当它们可能不需要验证时。

我还看过BootstrapValidator切换示例，它似乎复制了我想要的结果，但我一直无法做到这一点。(http://bootstrapvalidator.com/examples/toggle/)

任何帮助都将不胜感激！谢谢。

Answer 1

我自己解决了这个问题。

使用相同的初始调用：

// Exclude disabled fields from validation
$('#loginform').bootstrapValidator({
    excluded: [":disabled"]
}); 

然后，我创建了一个选择器，该选择器迫使用户进行选择：

<select class="form-control" id="type" name="type">
  <option value="" selected disabled>Select Type</option>
  <option value="type1">Type #1</option>
  <option value="type2">Type #2</option>
</select>

在此下面，我有一些隐藏字段，这些字段取决于所选择的类型。

<!-- display and validate always -->
<div id="type1fields">
  <input type="text" name="field1" id="field1">
</div>

<!-- display and validate only if "type2" is selected -->
<div id="type2fields" style="display:none;">
  <input type="text" name="field2" id="field2">
</div>

然后，我使用jQuery根据需要将字段设置/取消设置为禁用：

$("#type").on("change", function() {
  var val = $(this).val();

  if(val === "type1") {
    $("#type2fields").fadeOut(); // fade out in case user previously selected it
    $("#field2").attr("disabled", true); // set field to disabled
  }

  if(val === "type2") {
    $("#type2fields").fadeIn();
    $("#field2").attr("disabled", false); // remove the disabled element in case user previously selected it
  }

});