Quisiera dejarles la siguiente inquietud, ya que he estado batallando harto rato con esto y no he podido corregir lo que sucede.
Tengo este HTML:
<div class="clone-group" >
<table border="0" class="form-group cloneprop" >
<tr >
<td style="width: 70%;">
NOMBRE O RAZÓN SOCIAL
</td>
<td style="width: 18%;" align="center">
RUT
</td>
<td style="width: 10%;" align="center">
Agregar / Eliminar
</td>
</tr>
<tr>
<td>
<input class="form-control required 3_nombre_prop _prop" readonly placeholder="Nombres" style="width: 38%; display: inline;" id="3_nombre_prop" value="" name="3_nombre_prop[]" type="text" />
<input class="form-control required 3_apep_prop _prop" readonly placeholder="Apellido Paterno" style="width: 30%; display: inline;" id="3_apep_prop" value="" name="3_apep_prop[]" type="text" />
<input class="form-control required 3_apem_prop _prop" readonly placeholder="Apellido Materno" style="width: 30%; display: inline;" id="3_apem_prop" value="" name="3_apem_prop[]" type="text" />
</td>
<td >
<input class="form-control required 3_rut_prop" id="3_rut_prop" value="" name="3_rut_prop[]" type="text" />
<input class="" type="hidden" id="3_rut_prop_x" name="3_rut_prop_x[]" value="" />
</td>
<td align="center" >
<button type="button" class="btn btn-primary addButton" aria-label="Left Align" id="">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Agregar
</button>
</td>
</tr>
</table>
</div>
<input type="hidden" class="n_item_prop" name="n_item_prop" value="0">
Valido un rut en esta tabla, sin problemas. Pero cuando agrego un clon de esta tabla con jQuery e intento validar ese rut, el popover con el mensaje, aparece siempre en la primera tabla y no en el campo que corresponde, es decir en el clon.
Tengo en el JS:
$(function(){
// PARA CLONAR
var i = parseInt($('.n_item_prop').val(), 10);
var bFlag1=i;
var cloneItem = $(".cloneprop:last");//class de la tabla
var cloneWrap = $(".clone-group");//div
$(".addButton").on("click", function () {
if(i < 4){
bFlag1++;
i = i + 1;
cloneItem.find('._prop').attr('readonly','readonly');
var clon = cloneItem.clone(true).attr('id', 'pr_'+bFlag1).appendTo(cloneWrap);
clon.find('[type=text]').val('');
clon.find('[type=hidden]').val('');
clon.find('[type=email]').val('');
clon.find(".addButton")
.replaceWith( '<button type="button" class="btn btn-primary remButton" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');
$( ".n_item_prop" ).remove();
str_id = '<input type="hidden" class="n_item_prop" name="n_item_prop" value="'+i+'">';
$("#form_smpe").append(str_id);
}
if( $('#3_rut_prop').val()!="" ){
var v1 = id_rut($('#3_rut_prop').val(), $("#3_nombre_prop"),$("#3_apep_prop"),$("#3_apem_prop"));
}
});
$("body").on("click", ".remButton", function () {
$(this).closest(".cloneprop").remove();
i = i - 1;
$( ".n_item_prop" ).remove();
str_id = '<input type="hidden" class="n_item_prop" name="n_item_prop" value="'+i+'">';
$("#form_smpe").append(str_id);
});
// validate
$('#form').validate({
ignore: '[readonly=readonly]',
errorPlacement: function (error, element) {
var lastError = $(element).data('lastError'), newError = $(error).text();
$(element).data('lastError', newError);
if (newError !== '' && newError !== lastError) {
$(element).popover({
trigger: "manual",
placement: "auto top",
content: newError,
container: "body",
template: "<div class=\"popover\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"popover-content\"><p></p></div></div>"
});
if (element.is(':hidden')) {
$(element).next('span').popover('show').addClass('has-error').removeClass('has-success');
console.log('hidden element');
}else {
$(element).popover("show").parents(".form-group").addClass('has-error').removeClass('has-success');
console.log('normal element');
}
}
},
success: function (label, element) {
$(element).popover("hide").parents(".form-group").removeClass('has-error').addClass('has-success');
},
rules: {
"3_rut_prop[]": {
required: true
}
},
messages: {
"3_rut_prop[]": {
required: "Debe ingresar un dato válido"
}
}
});
// VALIDA RUT
$.validator.addMethod("3_rut_prop", function(value, element){
return this.optional(element) || $.Rut.validar(value);
}, "Este campo debe ser un rut valido.");
$('#3_rut_prop').Rut({
validation: false
});
});
Para las validaciones de jQuery, tengo las siguientes llamadas;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.Rut.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="js/validate_v.js"></script>
Como les mencionaba, con esto valido el rut de la tabla. Pero al intentar validar el rut de la tabla clonada, el popover con el mensaje aparece siempre en la primera tabla.
var clon = cloneItem.clone(true).attr('id', 'pr_'+bFlag1).appendTo(cloneWrap);
, la ves?3_nombre_prop
o3_apep_prop
)