javascript - 使用 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(); 
});

请帮我解决我做错的地方。

提前致谢

这是 fiddle 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) when the user click addmore button and user click next button for the validation it should say You have missed 6 fields. Please fill before submitted because the user has not fill any of the mandatory field from the clone 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();。

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

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