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

Question

是否有一种简单的方法,使用parsleyjs根据另一个字段创建一个字段？

在这里查看我的js小提琴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

还没有简单的方法(见这个和这个).

您可以required使用Javascript 切换属性,也可以在一个字段上收听正确的欧芹事件并检查其他字段.

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 */
  }
})