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

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

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

Answer 2

从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 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监听器，我们可以执行这种代码，将签名字段添加为必填字段。这是针对这个问题的行动。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您还可以隐藏不再需要的部分，或者停用不需要的字段，并将import express = require("express"); import ItemController = require("./../../controllers/ItemController"); var router = express.Router(); class ItemRoutes { private _itemController: ItemController; constructor () { this._itemController = new ItemController(); } get routes () { var controller = this._itemController; router.get("/Items", controller.retrieve); router.post("/Items", controller.create); router.put("/Items/:_id", controller.update); router.get("/Items/:_id", controller.findById); router.delete("/Items/:_id", controller.delete); return router; } } Object.seal(ItemRoutes); export = ItemRoutes;和[disabled]添加到:hidden欧芹选项中。

excluded

注意：您不需要隐藏每个字段，隐藏父{ excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden', }就足够了。

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

Answer 6

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

Answer 7

鉴于现在每个人和他们的母亲都在使用前端JS框架，我认为我会采用我通常使用的方法。在我的情况下（knockout js），我将使用框架根据绑定到复选框的值添加/删除这些特定字段。

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

7 个答案: