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

Question

我正在使用 parsleyjs 来验证我的表单客户端。我有一个场景，在单击复选框时，会暴露更多表单字段并需要验证。如果随后取消选中该复选框，则表单字段将被隐藏，并且需要删除验证。

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

Answer 1

我运行几周前就遇到过这种情况。您确实需要额外的 js 才能完成此操作。我四处寻找，发现了一些接近但需要进行一些调整以满足我的需要的脚本：它取决于预定义的字段定义。没有布埃诺。我希望它复制字段，而不管它们的 names/ids/whatever。然后，当然，增加每个新的字段名称。也不克隆用户输入的任何值。

由于被克隆的字段已经进行了必要的欧芹验证，因此与它们一起进行。

这是我想出的克隆代码。我相信它可以使用改进。并且 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']);
})

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

Programatically add fields to parsley form

parsley.js