Question

最初，当用户点击下一个按钮时，它将显示该消息因为你错过了7个领域。请在提交前填写。
如果用户点击了添加更多按钮，它将无法克隆如果用户单击下一步按钮，请填写任何必填字段。该消息仍显示您错过了7个字段。请填写之前提交
一旦用户开始填写克隆人中的任何一个字段并且他错过了克隆和原始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按钮并且用户点击下一步按钮时验证它应该说你错过了6个领域。请填写之前提交，因为用户没有填写任何强制性克隆div中的字段

然后你还需要删除“学位日期”＆＃39;从强制性，或不设置学位日期＆＃39;当你克隆。

$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。

较少的验证仅适用于＆＃39;测试＆＃39;部分。但很容易习惯被添加到学校部分。

使用jquery部分工作克隆验证

1 个答案: