克隆中的验证无法使用 jquery

Question

使用 jquery 和我当前的代码在克隆中进行验证。

如果用户最初单击下一步按钮而没有填写任何必填字段，则会显示错误消息 您错过了 4 个字段。提交前请填写
如果用户单击表单中的“添加更多”按钮，如果用户未填写任何字段，则应提示消息显示成功。
如果用户填写克隆中的任何一个字段，如果单击下一步按钮，它应该显示总计 您错过了 7 个字段。请在提交前填写。.
如果用户单击删除按钮，然后如果用户单击下一步按钮，它应该说 您错过了 4 个字段。提交前请填写

用我目前的代码，我已经达到了第一点，但没有达到第 2、3、4 点，我很困惑，请帮助我。我在挣扎

这里是jquery代码

$(document).ready(function () {  
$('.error_msge').hide();
 $("#basicForm").validate({
     onkeyup: false,
        showErrors: function (errorMap, errorList) {
        var errors = this.numberOfInvalids();
        
        if (errors) {
            var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
            $("#error_message").html(message);
            $(".error_msge").show();
        } else {
            $(".error_msge").hide();
        }
        this.defaultShowErrors();
    },
    errorPlacement: function () {
        return false;
    },
    highlight: function (element) {
        
        if ($(element).is(':radio'))  {
           
        } else {
            $(element).addClass('errRed');
        }
        $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');            
    },
    unhighlight: function (element) {
        
        if ($(element).is(':radio')) {
        } else {
            $(element).removeClass('errRed');
        }
        $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');
        
    },
    
    rules: {
        txt_Jbt: "required",
        txt_Empl: "required",
        txt_Fdob: "required",
        txt_Tdob: "required"
    }
});

这是fidde Link

请帮帮我

提前致谢

Answer 1

检查您在 jsfiddle 中工作的代码。克隆的元素具有相同的名称属性 <input name="**"> 值。验证器将其视为一个字段，尽管它们是 different.In 除此之外，我根据 class 名称分配规则。让我知道这是否是您预期的行为。

....
$clone.find('[id]').each(function () {
  this.id += '_' + $('.cloned-row3').length + 1 
  this.name += '_' + $('.cloned-row3').length + 1 
});
....

编辑 1：

Working solution - jsfiddle

克隆中的验证无法使用 jquery

validation in clone not working using jquery

jquery

jquery-validate