Hi I'm using the plugin jquery validator this is the plugin linkhttps://jqueryvalidation.org/
I need to add validation to a cloned multiple input field, I've create a jsfiddle with the code. At the moment it does only validate the first input filed but not the cloned as well. Can someone help me please?
This is the jsfiddle link https://jsfiddle.net/k3yvq547/5/
this is my javascript code
var Groups = function() {
var kmg_admin_join_flat_owner = function() {
// Store table id into a variable
var table = $('#kmg_admin_flats_list');
var form = $('#kmg_admin_new_flat_owner_modal_form');
var error = $('.alert-danger', form);
var success = $('.alert-success', form);
var warning = $('.alert-warning', form);
// If user close modal then it shouldn't show previous messages when modal opened again
$('#kmg_admin_new_flat_owner_modal').on('hidden.bs.modal', function() {
$('.alert_custom').removeClass('alert-danger');
$('.alert_custom').removeClass('alert-success');
$('.alert_custom').removeClass('alert-warning');
$('.has-error').removeClass('has-error');
// Remove jquery form validation from previous modal
form.validate().resetForm();
});
// Handle click on button add new owner
table.on('click', '.kmg_admin_add_flat_owner', function(e) {
e.preventDefault();
// Hide cloned fields if they were in the previous modal
$('.removeFieldGroup1').hide();
// Show add new owner modal
$("#kmg_admin_new_flat_owner_modal").modal("show");
// Get building unit ID associated to the button
var km_flat_id = this.id;
// Attach building unit ID to a hidden field inside the modal otherwise it will edit the previous as well
$("#kmg_admin_flat_id").val(km_flat_id);
// controlla validazione su dropdown per selezionare tipologia proprietario
form.on("change", "[name^='kmg_admin_new_flat_owner_type_modal']", function() {
form.validate().element($(this));
});
// controlla validazione su dropdown per selezionare proprietario
form.on("change", "[name^='kmg_admin_new_flat_owner_modal']", function() {
form.validate().element($(this));
});
form.validate({
doNotHideMessage: true,
errorElement: 'span',
errorClass: 'help-block help-block-error',
focusInvalid: false,
rules: {
"kmg_admin_new_flat_owner_type_modal[]": {
required: true
},
"kmg_admin_new_flat_owner_modal[]": {
required: true
},
"kmg_admin_new_flat_owner_quota_modal[]": {
required: true
}
},
messages: {
"kmg_admin_new_flat_owner_type_modal[]": "Seleziona tipologia",
"kmg_admin_new_flat_owner_modal[]": "Seleziona proprietario",
"kmg_admin_new_flat_owner_quota_modal[]": "Inserisci quota"
},
errorPlacement: function(error, element) {
error.appendTo(element.closest('.form-group'));
},
invalidHandler: function(event, validator) {
success.hide();
error.show();
App.scrollTo(error, -200);
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
success: function(label) {
label.addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success');
},
submitHandler: function(form, event) {
event.preventDefault();
}
});
});
}
var kmg_admin_multiple_join_flat_owners = function() {
$('.s-select').selectpicker({
iconBase: 'fa',
tickIcon: 'fa-check'
});
$(".remove-div").hide();
$(".add_more_owner").click(function() {
// Store owner id from dropdown into a variable
var km_owner_id = $('.kmg_new_flat_owner_modal:last').val();
var fgc = $('body').find('.fieldGroup1').length;
//add more fields group
var fieldGroup = $(".fieldGroup1").clone();
// This is important
$('.kmg_new_flat_owner_modal').selectpicker('refresh');
var fieldHTML = '<div class="form-group fieldGroup1 removeFieldGroup1">' + fieldGroup.html() + '</div>';
fieldHTML = fieldHTML.replace('kmg_admin_new_flat_owner_type_modal-1', 'kmg_admin_new_flat_owner_type_modal-' + (fgc + 1));
fieldHTML = fieldHTML.replace('kmg_admin_new_flat_owner_modal-1', 'kmg_admin_new_flat_owner_modal-' + (fgc + 1));
fieldHTML = fieldHTML.replace('kmg_admin_new_flat_owner_quota_modal-1', 'kmg_admin_new_flat_owner_quota_modal-' + (fgc + 1));
$('body').find('.fieldGroup1:last').after(fieldHTML);
var el = $('.fieldGroup1').next();
// Hide add new button
el.find('.addmore-div').hide();
// Show remove button
el.find('.remove-div').show();
// This is important to remove duplicated selectpicker
$('.kmg_new_flat_owner_modal').last().next().remove();
$('.kmg_new_flat_owner_type_modal').last().next().remove();
// Hide oner from dropdown menu
$(".fieldGroup1").find(".kmg_new_flat_owner_modal option[value='" + km_owner_id + "']").hide();
$('.kmg_new_flat_owner_modal').selectpicker('refresh');
// Refresh selectpicker
$('.s-select').selectpicker('refresh');
});
//remove fields group
$("body").on("click", ".remove", function() {
// Get owner id from the dropdown before removing the cloned line
var km_owner_id = $(this).parents(".fieldGroup1").find('.kmg_new_flat_owner_modal:last').val();
// Show the owner from the deleted line into dropdown
$(".kmg_new_flat_owner_modal option[value='" + km_owner_id + "']").show();
$(this).parents(".fieldGroup1").remove();
$('.kmg_new_flat_owner_modal').selectpicker('refresh');
// Get number of lines left
var fgc = $('body').find('.fieldGroup1').length;
// If number of lines is one then load all the owners into the dropdown
if (fgc == 1) {
$(".kmg_new_flat_owner_modal option").show();
$('.kmg_new_flat_owner_modal').selectpicker('refresh');
}
});
}
return {
// Main function to initiate the module
init: function() {
kmg_admin_join_flat_owner();
kmg_admin_multiple_join_flat_owners();
}
};
}();
jQuery(document).ready(function() {
Groups.init();
});
