Estimados, junto con saludar, les comento mi inconveniente.
Tengo un formulario con varias tablas (en estas tablas tengo info básica de propietarios, representantes, etc.) validadas con jquery validate. Aparte dentro de las tablas, en la parte del nombre tengo el campo separado en nombres, apellido paterno y materno. En el próximo 'td' esta el rut. Si el rut supera los 50 millones es un rut de empresa sino es de una persona natural. Hasta aquí, todo bien con las validaciones. Pero al intentar realizar esta misma validación en otra tabla, a continuación esta NO FUNCIONA.
Aparte les comento, que en las tablas, tengo un 'agregar' de forma dinámica que realizo también con JQuery. Les adjunto mi código, para que lo vean y me guíen por el camino correcto.
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form role="form" method="post" action="index.php" name="form_" id="form_" class="forms_formularios" enctype="multipart/form-data">
<table border="0" class="tablaConBorde table clone-group1" id="" >
<thead>
<tr class="fondoResaltado_1">
<td style="width: 70%;" >
NOMBRES DEL PROPIETARIO
</td>
<td style="width: 20%;" align="center">
RUT
</td>
<td style="width: 10%;" align="center">
Agregar / Eliminar
</td>
</tr>
</thead>
<tbody >
<tr class="form-group clone1" >
<td>
<input class="form-control 2_nombres_prop" placeholder="Nombres" style="width: 38%; display: inline;" disabled id="2_nombres_prop" value="" name="2_nombres_prop[]" type="text" />
<input class="form-control 2_ape_p_prop" placeholder="Apellido Paterno" style="width: 30%; display: inline;" disabled id="2_ape_p_prop" value="" name="2_ape_p_prop[]" type="text" />
<input class="form-control 2_ape_m_prop" placeholder="Apellido Materno" style="width: 30%; display: inline;" disabled id="2_ape_m_prop" value="" name="2_ape_m_prop[]" type="text" />
</td>
<td >
<input class="form-control 2_rut_prop" onblur="valida_rut_pro( $(this).val(), $(this).parents('tr').attr('id') )" id="2_rut_prop" value="" name="2_rut_prop[]" type="text" />
</td>
<td align="center" >
<button type="button" class="btn btn-primary addButton1" aria-label="Left Align" id="">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Agregar
</button>
</td>
</tr>
</tbody>
</table>
<table border="0" class="tablaConBorde table clone-group2" id="" >
<thead>
<tr class="fondoResaltado_1">
<td style="width: 70%">
REPRESENTANTE LEGAL
</td>
<td style="width: 20%;" align="center" >
RUT
</td>
<td style="width: 10%;" align="center">
Agregar / Eliminar
</td>
</tr>
</thead>
<tbody>
<tr class="form-group clone2" >
<td >
<input class="form-control 2_rep_legal_nombres" placeholder="Nombres" style="width: 38%; display: inline;" disabled id="2_rep_legal_nombres" value="" name="2_rep_legal_nombres[]" type="text" />
<input class="form-control 2_rep_legal_ape_p" placeholder="Apellido Paterno" style="width: 30%; display: inline;" disabled id="2_rep_legal_ape_p" value="" name="2_rep_legal_ape_p[]" type="text" />
<input class="form-control 2_rep_legal_ape_m" placeholder="Apellido Materno" style="width: 30%; display: inline;" disabled id="2_rep_legal_ape_m" value="" name="2_rep_legal_ape_m[]" type="text" />
</td>
<td>
<input class="form-control 2_rep_legal_rut" onblur="valida_rut_rp( $(this).val(), $(this).parents('tr').attr('id') )" id="2_rep_legal_rut" value="" name="2_rep_legal_rut[]" type="text" />
</td>
<td align="center" >
<button type="button" class="btn btn-primary addButton2" aria-label="Left Align" id="">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Agregar
</button>
</td>
</tr>
</tbody>
</table>
<input type="hidden" class="n_item_1" name="n_item_1" value="0">
<input type="hidden" class="n_item_2" name="n_item_2" value="0">
</form>
<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/validate_v_shcl.js"></script>
<script type="text/javascript" src="js/datepicker-es.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>
</body>
Código JS para agregar las tablas dinámicamente
$(function(){
/********************* PARA DINAMICAS - NUEVA FORMA ******************************/
// PROPIETARIO
// var i = 0;
var i = parseInt($('.n_item_1').val(), 10);
var bFlag1=i;
var cloneItem = $(".clone1:last");//class de la tabla
var cloneWrap = $(".clone-group1");//div
$(".addButton1").on("click", function () {
bFlag1++;
if(i < 4){
i=i+1;
var clon = cloneItem.clone(true).attr('id', '_'+bFlag1).appendTo(cloneWrap);
clon.find('[type=text]').val('');
clon.find(".addButton1")
.replaceWith( '<button type="button" class="btn btn-primary remButton1" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');
$( ".n_item_1" ).remove();
str_id = '<input type="hidden" class="n_item_1" name="n_item_1" value="'+i+'">';
$("#form_").append(str_id);
}
});
$("body").on("click", ".remButton1", function () {
$(this).closest(".clone1").remove();
i=i-1;
$( ".n_item_1" ).remove();
str_id = '<input type="hidden" class="n_item_1" name="n_item_1" value="'+i+'">';
$("#form_").append(str_id);
});
// REP LEGAL
// var i2 = 0;
var i2 = parseInt($('.n_item_2').val(), 10);
var bFlag2=i2;
var cloneItem2 = $(".clone2:last");//class de la tabla
var cloneWrap2 = $(".clone-group2");// div
$(".addButton2").on("click", function () {
bFlag2++;
if(i2 < 4){
i2 = i2 + 1;
var clon = cloneItem2.clone(true).attr('id', '_'+bFlag2).appendTo(cloneWrap2);
clon.find('[type=text]').val('');
// clon.find('[type=email]').val(''); // para input text de tipo email
clon.find(".addButton2")
.replaceWith( '<button type="button" class="btn btn-primary remButton2" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');
$( ".n_item_2" ).remove();
str_id2 = '<input type="hidden" class="n_item_2" name="n_item_2" value="'+i2+'">';
$("#form_").append(str_id2);
}
});
$("body").on("click", ".remButton2", function () {
$(this).closest(".clone2").remove();
i2 = i2 - 1;
$( ".n_item_2" ).remove();
str_id2 = '<input type="hidden" class="n_item_2" name="n_item_2" value="'+i2+'">';
$("#form_").append(str_id2);
}); });
Código JS para validar lo indicado en el campo rut:
function valida_rut_pro(xRut, id){
// ARMAMOS LA VARIABLE 'ID' DEL TAG
var clone1='#'+id;
// alert("1.:"+xRut);
var xurl="vws/ajax_validar_rut.php?rut="+xRut;
// alert(1);
$.ajax({
url: xurl,
type: "GET",
beforeSend: function(){
$(clone1+" #2_nombres_prop").prop('disabled', true);
$(clone1+" #2_ape_p_prop").prop('disabled', true);
$(clone1+" #2_ape_m_prop").prop('disabled', true);
// alert(2);
},
success: function(data){
// alert(3)
if(data){
// alert(4);
if(data==1){
$(clone1+" #2_ape_p_prop").prop('disabled', false);
$(clone1+" #2_ape_p_prop").focus();
// alert(5);
}
else if(data==0){
$(clone1+" #2_nombres_prop").prop('disabled', false);
$(clone1+" #2_nombres_prop").focus();
$(clone1+" #2_ape_p_prop").prop('disabled', false);
$(clone1+" #2_ape_m_prop").prop('disabled', false);
// alert(6);
}
}
},
error: function(){
// alert("cuek!");
}
});
}
function valida_rut_rp(xRut, id){
// ARMAMOS LA VARIABLE 'ID' DEL TAG
var clone2='#'+id;
// alert("1.:"+xRut);
var xurl="vws/ajax_validar_rut.php?rut="+xRut;
alert(1);
$.ajax({
url: xurl,
type: "GET",
beforeSend: function(){
$(clone2+" #2_rep_legal_nombres").prop('disabled', true);
$(clone2+" #2_rep_legal_ape_p").prop('disabled', true);
$(clone2+" #2_rep_legal_ape_m").prop('disabled', true);
alert(2);
},
success: function(data){
alert(3)
if(data){
alert(4);
if(data==1){
alert("clone2: "+clone2)
$(clone2+" #2_rep_legal_ape_p").prop('disabled', false);
$(clone2+" #2_rep_legal_ape_p").focus();
alert(5);
}
else if(data==0){
$(clone2+" #2_rep_legal_nombres").prop('disabled', false);
$(clone2+" #2_rep_legal_nombres").focus();
$(clone2+" #2_rep_legal_ape_p").prop('disabled', false);
$(clone2+" #2_rep_legal_ape_m").prop('disabled', false);
alert(6);
}
}
},
error: function(){
// alert("cuek!");
}
});
}
Esto ultimo es para el ID del TR dinamico
$(document).ready(function(){
// le damos/iniciamos un id en el clon hijo
var r=0;
$(".clone-group1 tbody tr").each(function(){
$(this).attr('id','_'+r);
r++;
});
// le damos/iniciamos un id en el clon hijo
var r=0;
$(".clone-group2 tbody tr").each(function(){
$(this).attr('id','_'+r);
r++;
});
});
Esto funciona en la tabla de propietario, pero no en la de Representante..
_0
estará repetido. Y mirando un poco el código, me atrevería a decir que sí se repetirán más id's porque se basan en los valores den_item_1
yn_item_2
que son independientes y se actualizan con cada fila que se agrega y borra