BootstrapValidator 隐藏后不验证可见字段答案

【问题标题】：BootstrapValidator Not Validating Visible Field After Being HiddenBootstrapValidator 隐藏后不验证可见字段
【发布时间】：2014-08-04 01:40:48
【问题描述】：

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

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

我知道，为了让 BootstrapValidator 验证隐藏字段，您需要像这样定义“排除”元素；

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

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

我还查看了 BootstrapValidator 切换示例，它似乎复制了我想要实现的目标，但我无法让它发挥作用。 (http://bootstrapvalidator.com/examples/toggle/)

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

【问题讨论】：

标签： jquery twitter-bootstrap validation

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

});

【讨论】：