使用 jquery 部分工作的克隆验证

Question

1. 最初，当用户单击下一步按钮时，它将显示消息 因为您错过了 7 个字段。请在提交前填写。
2. 如果用户单击添加更多按钮，它将获得克隆而不 如果用户单击下一步按钮，请填写任何必填字段。这 消息仍然显示您错过了 7 个字段。请先填写 提交
3. 一旦用户开始填写克隆字段中的任何字段，他 错过了克隆和原始 div 中的其余必填字段，然后用户单击下一步按钮，它将显示错过了许多字段。

function check_for_validation_removal(element) {
    var parent_div = $(element).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input[type='text'],#txt_schName option:selected");
    console.log(parent_div);
    console.log(parent_div.length);
    var invalid_ele = 0;
    parent_div.each(function() {
        if ($(this).val().trim().length == 0) {
            invalid_ele = invalid_ele + 1;
        } 
    });
    console.log(invalid_ele);
    if (parent_div.length == invalid_ele) {
        parent_div.each(function() {
            $(this).removeClass("required_field");
            $(this).rules('remove');
        });

        bind_validation();
        update_errors();
    }
}

我尝试在更改时添加选择器仍然没有成功。

$('.cloned_field').on('input','.cloned_div',function(e){
    if($(this).val().trim().length > 0)
    {

        $(this).addClass("required_field");
        var parent_div = $(this).closest("div.cloned-row1").find("input");
        parent_div.each(function () {
            $(this).addClass("required_field");
        });
    }
    check_for_validation_removal($(this));
    bind_validation(); 
});

请帮助我哪里做错了。

提前致谢

这是小提琴Link

Answer 1

我认为问题是，仅当附加部分中的字段具有值时才应验证附加字段。所以我更新了bind_validation() 并添加了一个新函数addRemoveCloneValidation() 并删除了与问题无关的分配（尽管您仍然可能需要它）。

    function bind_validation(){
        $(".required_field ").each(function(){
            $(this).rules("add", { 
                required:true,
            });
        });
        addRemoveCloneValidation();
    }

    function addRemoveCloneValidation(){
    $('div[id^="added"]').each(function(index, item){
       var needsValidation = false;
        $.each($(item).find('.required_field'), function(index, item){                      
            if($(item).val()) 
                needsValidation = true; 
            $(item).change(addRemoveCloneValidation);
        });
        $.each($(item).find('.required_field'), function(index, item){ 
            $(item).rules("add", { 
                required:needsValidation,
            });
            if(!needsValidation)
               $(item).removeClass('errRed'); 
        });
    });   
}

添加新行时，会调用bind_validation，然后再调用addRemoveCloneValidation。然后，这会根据任何输入是否具有值来添加或删除所有克隆输入的验证。

Fiddle

编辑

在您的最后评论之后

2) 当用户点击 addmore 按钮并且用户点击 next 按钮时 验证应该说你错过了 6 个字段。请填写 之前提交是因为用户没有填写任何必填项 来自克隆 div 的字段

那么您还需要将“学位日期”从强制性中删除，或者在克隆时不要设置“学位日期”。

$clone.find("input.deg_date")
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker({
   dateFormat: "mm-dd-yy",
   changeMonth: true,
   yearRange: "-100:+0",
   changeYear: true,
   maxDate: new Date(),
   showButtonPanel: false,
});//.val(fulldate);       <--remove

Fiddle

编辑 2

要在表单上手动调用验证，可以使用$(".educationForm").valid();。

我已在第 141 行将其添加到 Fiddle。

较少的验证仅适用于“测试”部分。但可以很容易地用于添加到学校部分。