欧芹 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

还没有简单的方法（参见 this and this）。

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

Answer 2

这应该可以通过此处找到的很棒的小 Parsley 插件插件实现：http://themonk.github.io/parsely-conditions/

Answer 3

我知道这个问题是在 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 4

至少从 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 5

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

我用过这个：

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 6

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

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

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

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

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

parsley js - conditional required if checkbox checked

parsley.js