jquery验证在克隆元素

Question

我有一个动态表单，我在文档就绪和克隆元素上为其元素设置了name属性但是在克隆元素时我遇到了jquery验证的问题，因为在克隆元素之后，克隆元素和下一个元素的验证不相关，错误：

https://jsfiddle.net/4c93g5n1/

这是我的示例来源：

$(document).ready(function () {
    SetName();
});

$(document)
    .on("click",
    'span.btnCloneGroup',
    function (e) {
        e.preventDefault();

        destroyDatePickers();

        destroySelect2();

        var parentGroup = $(this).closest(".ParentGroup").first();

        var min = $(this).closest(".clonedGroup").find(".Min").val();
        var max = $(this).closest(".clonedGroup").find(".Max").val();
        var count = $(this).closest(".clonedGroup").find(".ParentGroup").length;


        if (count < max) {
            var clonedParentGroup = parentGroup.clone(true);
            parentGroup.closest(".clonedGroup").append(clonedParentGroup);

            clonedParentGroup.find('.InputTextData').val('');
            clonedParentGroup.find('.glyphicon-download').remove();
            clonedParentGroup.find('.glyphicon-remove-circle').remove();
            clonedParentGroup.find('.btnDelGroup').removeClass("hidden");
            $(this).addClass("hidden");
            $(this).closest(".ParentGroup").find(".btnDelGroup").addClass("hidden");

            if (count + 1 >= max) {
                var $a = $(this).closest(".clonedGroup");
                $a.find(".btnCloneGroup").addClass("hidden");
            }
            SetName();


            recreateDatePickers();

            recreateSelect2();

            clonedParentGroup.find(".text-danger").each(function () {
                $(this).empty();
            });

            clonedParentGroup.find(".NewRow").each(function () {
                $(this).attr("aria-describedby", "");
            });

            addValidation();

        }
    });



function SetName() {
    var i = -1;
    var j = -1;

    $(".OrderParam").each(function () {
        j++;
        $(this).find(".RowGroup").val(j);

        i = -1;
        $(this).find(".dataGroup").each(function () {
            i++;
            $(this).find(".Row").val(i);
        });

    });

    j = -1;
    i = -1;
    $(".GroupOrder").each(function () {
        j++;

        $(this).find(".dataGroup").each(function () {
            i++;
            var sName = "ViewOrder[" + i + "].Value";
            $(this).find(".NewRow").each(function () {
                $(this).attr("Name", sName);
            });


            $(this).find(".text-danger").each(function () {
                $(this).attr("data-valmsg-for", sName);

            });


            $(this).find(".MessageError").each(function () {
                $(this).attr("data-valmsg-for", sName);
                $(this).attr("Name", sName);
            });

            sName = "ViewOrder[" + i + "].OrderTypeParameterId";
            $(this).find(".NewRowA").each(function () {
                $(this).attr("Name", sName);
            });

            sName = "ViewOrder[" + i + "].OrderTypeParameterGroupId";
            $(this).find(".NewRowB").each(function () {
                $(this).attr("Name", sName);
            });


            sName = "ViewOrder[" + i + "].RowGroup";
            $(this).find(".RowGroup").each(function () {
                $(this).attr("Name", sName);
            });


            sName = "ViewOrder[" + i + "].Row";
            $(this).find(".Row").each(function () {
                $(this).attr("Name", sName);
            });

            sName = "ViewOrder[" + i + "].Index";
            $(this).find(".Index").each(function () {
                $(this).attr("Name", sName);
            });

            $(this).find(".Index").each(function () {
                $(this).val(i);
            });

        });

    });

}


function checkValidation(selector, showErrorMessage) {
    var abort = false;

    var messageBox1;
    var ul;

    messageBox1 = document.createElement("div");
    ul = document.createElement("ul");
    messageBox1.append(ul);

    var validate = $('#form-signin_v1').validate(); // Get validate instance
    var isValid = validate.checkForm(); // Valid?

    if (!isValid) {
        abort = true;
    }

    if (showErrorMessage) {
        $('#form-signin_v1').valid();
    }

    if (window.location.pathname.toLowerCase().indexOf("add") > -1) {
        $(".tab-pane.active .field-validation-error").each(function () {
            abort = true;
            ul.innerHTML += '<li class="error">' + $(this).text() + '</li>';
        });
    }
    else {
        $(".tab-pane .field-validation-error").each(function () {
            abort = true;
            ul.innerHTML += '<li class="error">' + $(this).text() + '</li>';
        });
    }

    if (abort) {
        if (showErrorMessage) {

            bootbox.dialog({
                title: 'error',
                className: "smallBootBox",
                message: messageBox1,
                buttons: {
                    close: {
                        label: 'close',

                        callback: function () {
                            bootbox.hideAll();
                        }
                    }
                }
            });


        }
    }

    $(".messageBox1").addClass("collapse");

    if (abort) {
        return false;
    } else {
        return true;
    }
}


$(document).ready(function () {

    $.validator.addMethod("isRequired", function (value, element) {
        return (value !== "");
    }, function (params, element) {
        return 'entering ' + $(element).closest(".dataGroup").find("label")
            .text() + " is required";
    });

    $.validator.addMethod("onlyPersianOrDigit", function (value, element) {
        value = value.trim();
        if (value === "")
            return true;

        if (/^[0-9\u0600-\u06FF\s]*$/.test(value)) {
            return true;
        } else {
            return false;
        }
    }, function (params, element) {
        return $(element).closest(".dataGroup").find("label")
            .text() + " must be persian";
    });

    $.validator.addMethod("onlyEnglishOrDigit", function (value, element) {
        value = value.trim();
        if (value === "")
            return true;

        if (/^[0-9A-Za-z\s]/g.test(value)) {
            return true;
        } else {
            return false;
        }
    }, function (params, element) {
        return $(element).closest(".dataGroup").find("label")
            .text() + " must be english";
    });

    $.validator.addMethod("isValidNationalCode", function (value, element) {
        value = value.trim();
        if (value === "")
            return true;
        return isValidNationalCode(value);
    }, 'NotValidNationalCode');

    $.validator.addMethod("isValidPostCode", function (value, element) {
        value = value.trim();
        if (value === "")
            return true;
        return value.length === 10;
    }, 'NotValidPostCode');

    $.validator.addMethod("isValidPhoneNumber", function (value, element) {
        value = value.trim();
        if (value === "")
            return true;
        var patt = new RegExp("^09[0-9]{9}$");
        return patt.test(value);
    }, 'NotValidPhoneNumber');

    $.validator.addMethod("isValidLandlinePhoneNumber", function (value, element) {
        value = value.trim();
        if (value === "")
            return true;
        var patt = new RegExp("^0[0-9]{4,10}$");
        return patt.test(value);
    }, 'NotValidLandlinePhoneNumber');

    addValidation();

});


function addValidation() {

    $('.requiredAsan').each(function () {
        $(this).rules('add', {
            isRequired: true
        });
    });

    $('.Email').each(function () {
        $(this).rules('add', {
            email: true,
            messages: {
                email: "Email not valid"
            }
        });
    });

    $('.Persian').each(function () {
        $(this).rules('add', {
            onlyPersianOrDigit: true
        });
    });

    $('.English').each(function () {
        $(this).rules('add', {
            onlyEnglishOrDigit: true
        });
    });


    $('.NationalCode').each(function () {
        $(this).rules('add', {
            isValidNationalCode: true
        });
    });


    $('.PostCode').each(function () {
        $(this).rules('add', {
            isValidPostCode: true
        });
    });

    $('.PhoneNumber').each(function () {
        $(this).rules('add', {
            isValidPhoneNumber: true
        });
    });

    $('.LandlinePhoneNumber').each(function () {
        $(this).rules('add', {
            isValidLandlinePhoneNumber: true
        });
    });



}


/* begin adds datepicker for dynamic elements */
function destroyDatePickers() {
    $('.DatePicker').datepicker('destroy');
    $('.DatePicker').removeClass("hasDatepicker").removeAttr('id');
}

function recreateDatePickers() {
    $('.DatePicker').each(function () {
        $(this).datepicker({
            showButtonPanel: true,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy/mm/dd',
            minDate: '-120Y',
            maxDate: '+0Y',
            yearRange: '-120:+0',
            onSelect: function () {
                $(this).closest(".mdl-textfield").addClass("is-dirty");
            },
            onClose: function () { $(this).valid(); }  //remove validation error on blur
        });

    });
};
/* end adds datepicker for dynamic elements */

function destroySelect2() {
    $("select").each(function () {
        if ($(this).children('option').length > 10 || $(this).children('optgroup').length > 1) {
            if ($(this).data('select2')) {
                $(this).select2("destroy");
            }
        }

    });
}

function recreateSelect2() {
    $("select").each(function () {
        if ($(this).children('option').length > 10 || $(this).children('optgroup').length > 1) {
            $(this).select2({
                dir: "rtl",
                dropdownAutoWidth: true
            });
        }

        //override select2 style to match with google material
        $(this).parent().find('.select2-container--default .select2-selection--single').css("background-color", "transparent");
        $(this).parent().find('.select2-container--default .select2-selection--single').css("border", "none");
        $(this).parent().find('.select2-container--default .select2-selection--single').css("border-bottom", "2px solid #525252");

    });

}


$("input[data-val=true],textarea[data-val=true],select[data-val=true]").on('focusout keyup', function (e) {

    $(this).valid();

    if (window.location.pathname.toLowerCase().indexOf("add") > -1) {  // if this is add method

        if (checkValidation(".tab-pane.active", false)) {
            $("li.active").next("li").removeClass('disabled'); //enable next tab
            $(".btnNext").css('cursor', 'pointer');

        }
        else {
            $("li.active").next("li").each(function () {   //disable all next tabs
                $(this).addClass('disabled');
            });
            $(".btnNext").css('cursor', 'not-allowed');
        }

    }

});

/*end enable disable tabs if active tab not valid */

<div class="clonedGroup GroupOrder">

    <div class="panel panel-success col-md-12 ParentGroup uu">
        <div class="panel-heading">
            <div class="row">
                <div class="col-md-6">
                    <div class="groupTitle">company branches</div>
                </div>

                <div class="col-md-12 text-left">
                    <div class="col-md-10"></div>
                    <a class="col-md-1" href="#" title="clone group">
                        <span class="btnCloneGroup">
                            <span class="glyphicon glyphicon-plus-sign green iconSizeInOrder"></span>
                        </span>
                    </a>


                    <a class="col-md-1" href="#" title="delete group">
                        <span class="btnDelGroup">
                            <span class="glyphicon glyphicon-minus-sign red iconSizeInOrder"></span>
                        </span>
                    </a>

                </div>

            </div>

        </div>
        <div class="panel-body">

            <div class="row OrderParam">

                <input type="hidden" value="1" class="Min">
                <input type="hidden" value="10" class="Max">

                <div class="clonedParam img-responsive img-thumbnailA ">

                    <div class="col-md-4 ParentParam ">

                        <div class="form-group dataGroup">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12 parameterContainer">
                                        <label>province</label>

                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12">

                                <select class="form-control NewRow InputTextData  province select2-hidden-accessible" data-valmsg-for="لطفا اداره کل را وارد نمائید" data-val-required="لطفا اداره کل را وارد نمائید" data-val="true" tabindex="-1" aria-hidden="true" name="ViewOrder[14].Value">
                                    <option selected="selected" value="">انتخاب نمایید</option>
                                    <option value="7fb8a8c5-8295-4372-a826-7d4d8499c7b0">اداره کل ثبت اسناد و املاک استان اردبیل</option>
                                    <option value="6a060a95-46c8-41f2-9551-c9a23788530e">اداره کل ثبت اسناد و املاک استان اصفهان</option>
                                </select><span class="select2 select2-container select2-container--default" dir="rtl" style="width: 250px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-l39d-container" style="background-color: transparent; border-top: none; border-right: none; border-bottom: 2px solid rgb(82, 82, 82); border-left: none; border-image: initial;"><span class="select2-selection__rendered" id="select2-l39d-container" title="انتخاب نمایید">انتخاب نمایید</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                <span class="field-validation-valid text-danger" data-valmsg-for="ViewOrder[14].Value" data-valmsg-replace="true"></span>

                            </div>
                        </div>

                    </div>

                </div>
                <div class="clonedParam img-responsive img-thumbnailA ">

                    <div class="col-md-4 ParentParam ">

                        <div class="form-group dataGroup">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12 parameterContainer">
                                        <label>registration office</label>

                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12">

                                <select class="form-control NewRow InputTextData  registrationOffice select2-hidden-accessible" data-valmsg-for="لطفا واحد ثبتی را وارد نمائید" data-val-required="لطفا واحد ثبتی را وارد نمائید" data-val="true" tabindex="-1" aria-hidden="true" name="ViewOrder[15].Value">
                                    <option selected="selected" value="">انتخاب نمایید</option>
                                    <option value="872cb9bf-8264-1da7-df53-9bc670ca44fd">اداره ثبت شرکت ها و موسسات غیرتجاری تهران</option>
                                    <option value="a9a3fd29-c3d6-d8fd-5aae-dc5d3e9043c2">مرجع ثبت شرکت ها و موسسات غیرتجاری یزد</option>
                                </select><span class="select2 select2-container select2-container--default" dir="rtl" style="width: 250px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-wfvi-container" style="background-color: transparent; border-top: none; border-right: none; border-bottom: 2px solid rgb(82, 82, 82); border-left: none; border-image: initial;"><span class="select2-selection__rendered" id="select2-wfvi-container" title="انتخاب نمایید">انتخاب نمایید</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                <span class="field-validation-valid text-danger" data-valmsg-for="ViewOrder[15].Value" data-valmsg-replace="true"></span>

                            </div>
                        </div>

                    </div>

                </div>
                <div class="clonedParam img-responsive img-thumbnailA ">

                    <div class="col-md-4 ParentParam ">

                        <div class="form-group dataGroup">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12 parameterContainer">
                                        <label>company branch address</label>

                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12">

                                <textarea class="form-control NewRow InputTextData  Address Persian multi-line" rows="5" cols="20" data-valmsg-for="لطفا نشانی شعبه را وارد نمائید" data-val-required="لطفا نشانی شعبه را وارد نمائید" data-val="true" name="ViewOrder[16].Value"></textarea>
                                <span class="field-validation-valid text-danger" data-valmsg-for="ViewOrder[16].Value" data-valmsg-replace="true"></span>

                            </div>
                        </div>

                    </div>

                </div>
                <div class="clonedParam img-responsive img-thumbnailA ">

                    <div class="col-md-4 ParentParam ">

                        <div class="form-group dataGroup">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12 parameterContainer">
                                        <label>post code</label>

                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12">

                                <input class="form-control NewRow InputTextData  PostCode" type="number" data-valmsg-for="لطفا کد پستی را وارد نمائید" data-val-required="لطفا کد پستی را وارد نمائید" data-val="true" name="ViewOrder[17].Value">
                                <span class="field-validation-valid text-danger" data-valmsg-for="ViewOrder[17].Value" data-valmsg-replace="true"></span>

                            </div>
                        </div>

                    </div>

                </div>
                <div class="clonedParam img-responsive img-thumbnailA ">

                    <div class="col-md-4 ParentParam ">

                        <div class="form-group dataGroup">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12 parameterContainer">
                                        <label>manager fullname</label>

                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12">

                                <input class="form-control NewRow InputTextData " type="text" data-valmsg-for="لطفا نام و نام خانوادگی مدیر را وارد نمائید" data-val-required="لطفا نام و نام خانوادگی مدیر را وارد نمائید" data-val="true" name="ViewOrder[18].Value">
                                <span class="field-validation-valid text-danger" data-valmsg-for="ViewOrder[18].Value" data-valmsg-replace="true"></span>

                            </div>
                        </div>

                    </div>

                </div>
                <div class="clonedParam img-responsive img-thumbnailA ">

                    <div class="col-md-4 ParentParam ">

                        <div class="form-group dataGroup">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12 parameterContainer">
                                        <label>branch manager nationalcode</label>

                                    </div>

                                </div>
                            </div>

                            <div class="col-md-12">
                                <input class="form-control NewRow InputTextData  NationalCode" type="number" data-valmsg-for="لطفا کد ملی مدیر شعبه را وارد نمائید" data-val-required="لطفا کد ملی مدیر شعبه را وارد نمائید" data-val="true" name="ViewOrder[19].Value">
                                <span class="field-validation-valid text-danger" data-valmsg-for="ViewOrder[19].Value" data-valmsg-replace="true"></span>

                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>
</div>