編程向歐芹形式添加字段

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']); 
})