我有一个动态表单，我在准备好文档和克隆元素时为其元素设置了名称属性，但是在克隆元素时我遇到了 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>