1

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&Oacute;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.

6
  • 2
    Podría empezar con la cantinela de siempre: "hay ID's repetidos", pero en este caso creo que el problema es que también hay name's repetidos (algo que a jQuery Validate no le termina de gustar)
    – Alvaro Montoro
    Commented el 21 mar. 2016 a las 19:06
  • Por favor no confundir las etiquetas a utilizar en las preguntas. Tu pregunta es sobre el HTML/JS generado, esto no tiene nada que ver con PHP en absoluto.
    – user227
    Commented el 21 mar. 2016 a las 19:23
  • Eso lo resolví hace tiempo, en uno de mis primeras pregunta, leí completo el texto que tú mismo colocaste. Me asegure de que no hubieran ID's repetidos. Al agregar una tabla nueva, le coloco un ID distinto, en la linea var clon = cloneItem.clone(true).attr('id', 'pr_'+bFlag1).appendTo(cloneWrap);, la ves?
    – x_Mario
    Commented el 21 mar. 2016 a las 19:25
  • Pero dentro de esa tabla hay IDs que se repiten de tabla a tabla (por ejemplo 3_nombre_prop o 3_apep_prop)
    – Alvaro Montoro
    Commented el 21 mar. 2016 a las 19:43
  • Ahmmm ahora comprendo tu punto. No cuenta el que la tabla, tenga un ID distinto, tambien lo deben tener todos los input dentro de ella. Entonces, como coloco cada input con su respectivo ID..?
    – x_Mario
    Commented el 21 mar. 2016 a las 19:48

1 respuesta 1

0

Hay varias cosas que pueden crear problemas:

  • jQuery Validate usa el atributo name para identificar las diferentes reglas y mensajes a mostrar y por ello no trabaja muy bien con inputs que tienen el mismo atributo name (por ejemplo: en formularios dinámicos en los que el usuario puede agregar campos con el mismo nombre).
  • Aparte de eso, el código presenta ID's repetidos (dentro de los elementos de las tablas), lo cual parece que también causa problemas con el plugin jQuery Validator a la hora de mostrar los mensajes de error.
  • Además, las reglas de validación se aplican a los campos existentes cuando se llama a validate(). Es decir, los campos que se agreguen después de manera dinámica no tienen la validación asociada.

Pero eso no quiere decir que no se pueda hacer... solamente que habrá que hacer unos pocos cambios para que funcione. Al menos:

  1. Eliminar los ID's duplicados
  2. Eliminar los nombres duplicados
  3. Añadir la validación a los campos dinámicos.

Vamos a empezar por partes. Pero ten en cuenta que no he podido probar todo el siguiente código porque algunas de las funciones faltan en el código de arriba y he tenido que inventármelas para hacer pruebas. La idea es darte una base para que puedes continuar y completarlo tú mismo.

Paso 1: Elimina los ID's de los campos a clonar

Elimina todos los ID's en los campos dentro de la tabla. De esta manera cuando se clonen las tablas, no habrá duplicidad de ID's y te ahorrarás problemas (no sólo con jQuery Validate, pero también otros posibles problemas a la hora de seleccionar elementos).

Como tienes el mismo valor que el ID también como nombre de clase, eso facilitará la adaptación si tienes estilos asociados con el ID. Además, que sean fáciles de identificar por el nombre de clase va a ser bueno más adelante.

Por ejemplo, así cambiarían algunas de las líneas de código que tienes:

<td>
  <input class="form-control required 3_nombre_prop _prop" readonly placeholder="Nombres" style="width: 38%; display: inline;" 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;" 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;" value="" name="3_apem_prop[]" type="text" />
</td>
<td >
  <input class="form-control required 3_rut_prop" value="" name="3_rut_prop[]" type="text" />
  <input class="3_rut_prop_x" type="hidden" name="3_rut_prop_x[]" value="" />
</td>

Paso 2: Haz que los nombres de los campos sean únicos

jQuery Validate tiene problemas cuando dos campos tienen el mismo atributo name (o el mismo atributo id, pero eso ya lo hemos solucionado) y muestra los mensajes de error sólo en el primero que encuentre (ésta es una parte del problema que tienes con la validación). Pero quieres que tengan el mismo nombre con corchetes (supongo que para que sea más fácil de procesar en PHP, que leerá todos los valores como un array).

Hay una alternativa, aunque no del todo limpia, para que todos los campos tengan un atributo name diferente y PHP los siga procesando como un array cuando reciba los datos del formulario: usar índices en los corchetes.

La idea es simple: de la misma manera que añades un id único a la fila cuando se crea (usando bFlag1), puedes añadir un name único a cada campo dentro del evento click del addButton:

clon.find('[name]').each(function() {
    $(this).attr("name", $(this).attr("name").replace("[]", "[" + bFlag1 + "]") );
});

De este modo, todos los campos tendrán ID's unicos, pero PHP los seguirá leyendo como un array cuando se envíe el formulario (incluso si los índices no son consecutivos tras borrar alguna tabla).

Paso 3: Agregar la validación a los campos dinámicos

Cuando se generan campos dinámicamente ya no tenemos ID's repetidos y todos los campos tienen un nombre único... ahora sólo falta añadir las reglas de validación a estos campos. Y para eso vamos a usar el método rules().

Con rules() puedes leer, añadir o quitar reglas de validación a un elemento dado; y en concreto queremos la parte de añadir, cuyo formato es el siguiente:

$(elemento).rules('add', { 
    ...reglas de validación...
})

En tu caso, esto se haría después de que el clon se haya añadido al DOM en el evento click del addButton. Tendrías que buscar los diferentes campos a validar (tienen una clase característica) y añadir las reglas de validación usando rules.

Parece que sólo validas el campo 3_rut_prop, así que no debería ser muy diferente de esto:

clon.find(".3_rut_prop").each(function() {
    $(this).rules('add', {
        required: true,
        messages: {
            required: "Debe ingresar un dato válido"
        }
    });
});

Sé que es una respuesta larga. Prueba a seguir los pasos y comenta/pregunta si te encuentras con algún problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.