编程向欧芹形式添加字段

Question

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

是否有功能可以在香菜中实现此功能？我浏览过文档，但只能找到如何通过html中的属性进行验证的详细信息。我正在寻找一种方法，我可以调用代码添加和删除字段进行验证。

Answer 1

几周前我遇到了这种情况。你确实需要额外的js来完成这个。我挖了一遍，发现一小段脚本接近，但需要进行一些调整以适应我的需要：它依赖于预定义的字段定义。没有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

香菜大多数验证场景是伟大的，但在过去，我挣扎着让它做什么，我需要 - 缺乏以编程验证周期交互的能力使得它更多的用处不大复杂的验证。

我写了一个叫库Okjs，在一个非常相似的方式工作，以香菜但有一个额外的好处，当你需要做一些像基于用户交互添加一个新的验证器到现场有一个代码的API允许你这样做：

https://github.com/jamesfiltness/Okjs

要在确定复选框的点击添加字段会去像这样：

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