1

Buen día a todos. Anteriormente consulte sobre campos dinámicos y sus validaciones. Hoy he logrado crear de forma dinámica estos campos sin que ninguno tenga el mismo id o el mismo name.

Pero Ahora debo validarlos y leyendo un montón de foros alrededor de la web incluyendo este, no he podido dar con la solución.

Mi HTML:

<div class="clone-group1">
<textarea id="txtarea_prop" style="display:none;">
    <table border="0" class="tablaConBorde table form-group clone1" id="pr_{0}" >
        <tr class="fondoResaltado_1">
            <td style="width: 70%;">
                NOMBRE O RAZ&Oacute;N SOCIAL
            </td>
            <td style="width: 15%;" align="center">
                RUT
            </td>
            <td style="width: 15%;" align="center">
                Agregar / Eliminar
            </td>
        </tr>
        <tr>
            <td>
                <input class="form-control 3_nombre_prop _prop" readonly placeholder="Nombres" style="width: 38%; display: inline;" id="3_nombre_prop_{0}" value="" name="3_nombre_prop_{0}_[]" type="text" />
                <input class="form-control 3_ape_p_prop _prop" readonly placeholder="Apellido Paterno" style="width: 30%; display: inline;" id="3_ape_p_prop_{0}" value="" name="3_ape_p_prop_{0}_[]" type="text" />
                <input class="form-control 3_ape_m_prop _prop" readonly placeholder="Apellido Materno" style="width: 30%; display: inline;" id="3_ape_m_prop_{0}" value="" name="3_ape_m_prop_{0}_[]" type="text" />
            </td>
            <td >
                <input class="form-control 3_rut_prop" id="3_rut_prop_{0}" name="3_rut_prop_{0}_[]" value="" 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>
    </table>
    <input type="hidden" class="n_item_1" name="n_item_1" value="0">
</textarea>
</div>
<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/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>

Mi JS:

$().ready(function(){

// Para Dinámicos
var template = jQuery.validator.format($.trim($("#txtarea_prop").val()));

function addRow() {
    var n_item = $('.n_item_1');
    var n1=n_item.val();
    if( n1<5 ){
        $(template(i++)).appendTo(".clone-group1");
        n_item.val(i);
        if(i>1){
            $(".clone1:last").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>');
        }
        // $('#3_rut_prop_'+n1).rules("add", "required");
    }
}
var i = parseInt($('.n_item_1').val(), 10);

addRow();
$(".addButton1").click(addRow);

$("body").on("click", ".remButton1", function () {
    $(this).closest(".clone1").remove();
    i = i - 1;
    $('.n_item_1').val(i);
});

$('#form_sravs').validate({
    ignore: '[readonly=readonly]',
    errorPlacement: function (error, element) { },
    success: function (label, element) { },
    rules: {},
    messages: {}
});

// Validación de rut
$.validator.addMethod("3_rut_prop", function(value, element){
    return this.optional(element) || $.Rut.validar(value);
}, "Este campo debe ser un rut valido.");
var r=$('.n_item_1').val()-1;
// console.log('r:'+r);
$('#3_rut_prop_'+r).Rut({
    validation: true
});

});

El error que me arroja es en el archivo 'jquery.validate.js'

TypeError: $.data(...) is undefined
     var settings = $.data(element.form, "validator").settings;

La línea que provoca esto, esta comentada en el código de JS. Y esto sucede al cargar la página.

También la validación de rut que aparece al final del JS tampoco funciona del todo bien, ya que solo toma los primeros campos y no los dinámicos.

Espero haber escrito bien la pregunta. Agradecido de antemano, quedo atento a vuestros comentarios.

2 respuestas 2

1

Creo que usas este plugin https://jqueryvalidation.org/

Te comparto una función de validación que uso

 function validate (form, successElement, errorElement, options){

    form.validate({
        errorElement: 'span', 
        errorClass: 'f-block-error', 
        focusInvalid: false, 
        ignore: "",  
        messages: options.messages,
        rules: options.rules,

        success: function (label) {
            label
                .closest('.form-element').removeClass('has-error'); 
        },

        submitHandler: function (form) {

            form.submit(form);
        }
    });

},

Y lo lo que mando es

var options = {         
    rules : {
        nombre : {
            minlength : 4,
            required : true
        },
        mail : {
             email: true,
            required : true
        }

    }
};

validate(form1, success1, error1, options);

Puedes agregar al elemento rules los campos dinamicos que quieres validar

1

Prueba con agregar el atributo requerido required a los campos dinámicos.

Ej:

<input class="form-control 3_rut_prop" id="3_rut_prop_{0}" name="3_rut_prop_{0}_[]" value="" type="text" required/>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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