Question

我使用parsleyjs验证我的表单客户端。我有一个场景，点击一个复选框，会暴露更多表单字段并需要验证。如果未选中该复选框，则隐藏表单字段并删除验证。

在欧芹中是否有实现这一目标的功能？我查看了文档，但只能找到如何通过html中的属性进行验证的详细信息。我正在寻找一种方法，我可以在代码中调用它来添加和删除要验证的字段。

Answer 1

几周前我遇到了这种情况。你需要额外的一点j来完成这个。我挖了一下，发现了一些接近但需要调整以满足我需要的脚本：它取决于预定义的字段定义。没有bueno。我想让它复制字段而不管它们的名字/ ids /等等。然后，当然，增加每个新的字段名称。也无需克隆用户输入的任何值。

由于正在克隆的字段已经具有必要的欧芹验证，因此它与它们一起正确。

这是我提出的克隆代码。我确信它可以使用改进。并且here's a fiddle有一个工作示例。

这是我潜伏多年后的第一份贡献。要温柔。 ;）

$('#btnDel').prop('disabled', true);
$('#btnAdd').prop('disabled', false);
   $('#btnAdd').click(function() {
    var num     = $('.clonedInput').length;
    var newNum  = new Number(num + 1);

    var newElem = $('#input1').clone().val('').attr('id', 'input' + newNum);
    newElem.find(':input').attr('id', function () {
        return this.id + '_' + newNum
        });
    newElem.find(':input').attr('name', function () {
        return this.name + '_' + newNum
        });
    newElem.find(':input').val('');

    $('#input' + num).after(newElem);
    $('#btnDel').prop('disabled', false);

    if (newNum == 5){
         $('#btnAdd').prop('disabled', true);
         }
     });

     $('#btnDel').click(function() {
        var num = $('.clonedInput').length;

        $('#input' + num).remove();
        $('#btnAdd').prop('disabled', false);

        if (num-1 == 1){
            $('#btnDel').prop('disabled', true);
            }
    });

    $('#btnDel').prop('disabled', true);
});

Answer 2

Parsley非常适合大多数验证方案，但在过去我一直在努力让它做我需要的东西 - 缺乏以编程方式与验证生命周期交互的能力使得它对于更复杂的验证不太有用。

我写了一个名为 Okjs 的库，它的工作方式与Parsley非常相似，但有一个额外的好处，当你需要做一些事情，比如根据用户交互向字段中添加一个新的验证器。允许您这样做的代码API：

https://github.com/jamesfiltness/Okjs

要点击Ok中的复选框添加字段，就像这样：

$('.my__checkbox').focus(function() {
  Ok.Form.addField('checkbox1', ['required']);
  Ok.Form.addField('checkbox2', ['required']);
})

以编程方式将字段添加到欧芹形式

2 个答案: