parsley js - 如果选中复选框，则需要有条件

Question

有没有一种简单的方法使用 parsleyjs 使一个字段依赖于另一个字段？

在这里查看我的 js fiddle http://jsfiddle.net/marksteggles/wbhLq0t4/1/

<form data-parsley-validate="true">
    <div class="form-group">
        <label>
            <input name="request_signature" type="checkbox" />Require signature</label>
        <div class="request_signature_fields">
            <textarea class="form-control required" name="signature_reason" rows="3"></textarea>
        </div>
    </div>
    <input class="btn btn-success" name="commit" type="submit" value="Send" />
</form>

Answer 1

至少从 2.2.0 开始，您可以创建自定义验证器：

window.Parsley.addValidator("requiredIf", {
   validateString : function(value, requirement) {
      if (jQuery(requirement).val()){
         return !!value;
      } 

      return true;
   },
   priority: 33
})

这会以这样的方式应用：

<textarea 
   class="form-control required" 
   name="signature_reason" 
   rows="3"
   data-parsley-validate-if-empty="true"
   data-parsley-required-if="#my-field-to-check"
></textarea>

说明

data-parsley-required-if 是我们刚刚定义的自定义验证器。它接受任意 jQuery 选择器，如果该字段包含非假值，则确保该字段不为空。

需要data-parsley-validate-if-empty 来确保该字段正在被验证，因为默认情况下 Parsley 不会验证空的非必填字段。

更多关于自定义验证器的数据：http://parsleyjs.org/doc/index.html#custom

Answer 2

目前还没有简单的方法（参见this 和this）。

您可以使用 Javascript 切换属性 required，或者在一个字段上监听正确的欧芹事件并检查另一个字段。

Answer 3

以防万一其他人试图解决这个问题。最好的方法似乎是更改所需的属性然后清除值。

我用过这个：

HTML：

<input id="checkbox-id" type="checkbox">
<div id="conditional-inputs" style="display:none;">
  <input type="text" name="somename" />
  <input type="text" name="othername" />
  <input type="text" name="onemoreforluck" />
</div>

jQuery:

$("#checkbox-id").change(function() {
  if(this.checked) {
    $('#conditional-inputs').slideDown();
    /* use .slideDown to display conditional input block */
    $("#conditional-inputs :input").prop('required', true);
    /* set required attribute on all inputs inside conditional area */
  }
  else{
    $('#conditional-inputs').slideUp();
    /* use .slideUp to hide conditional input block */
    $("#conditional-inputs :input").prop('required', false).val('');
    /* remove required attribute on all inputs and empty values of inputs */
  }
})

Answer 4

我知道这个问题是在 2012 年提出和回答的，很可能与 ParsleyJS v1 有关，而在撰写本文时最新版本是 v2.2.0。但是我不得不对使用 v1 的旧表单做一些工作，我发现条件是可能的（使用一点 jQuery）。所以这里是给任何可能仍然需要这个的人。

您可以使用以下方法动态添加和删除表单元素和约束（阅读：验证规则）：

$('#form').parsley('addItem', '#input_id');
$('#form').parsley('removeItem', '#input_id');
$('#input_id').parsley('addConstraint', '{ required: true }');
$('#input_id').parsley('removeConstraint', 'required');

因此，当复选框更改时，我们可以使用 jQuery 侦听器执行这种代码，它将签名字段添加为必填字段。这是针对问题的实际操作。

< script src = "js/parsley-v1.js" > < /script>
<script>
$('#request_signature').on('click', function() {
  if($(this).is(':selected')) {
    $('#signature_form').parsley('addItem', '#signature_reason');
    $('#signature_reason').parsley('addConstraint', { required: true });
  } else {
    $('#signature_reason').parsley('removeConstraint', 'required' });
    $('#signature_form').parsley('removeItem', '#signature_reason');
  }
});
</script >

<form id="signature_form" data-parsley-validate="true">
  <div class="form-group">
    <label>
      <input id="request_signature" name="request_signature" type="checkbox" />Require signature</label>
    <div class="request_signature_fields">
      <textarea id="signature_reason" class="form-control" name="signature_reason" rows="3"></textarea>
    </div>
  </div>
  <input class="btn btn-success" name="commit" type="submit" value="Send" />
</form>

Answer 5

您还可以隐藏不再需要的部分，或禁用不需要的字段，并将[disabled] 和:hidden 添加到excluded Parsley 选项中。

{
  excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden',
}

注意：你不需要隐藏每个字段，隐藏一个父 div 就足够了。

我在这里找到了一个很好的例子 ➡️http://jsfiddle.net/capripot/xoaLs4bt/

Answer 6

这应该可以通过这里找到的伟大的 Parsley 插件插件实现：http://themonk.github.io/parsely-conditions/