validar form dinamico

[chalchis]

Hola amigos estoy cargando de manera dinamica un formulario con el load de jquery
pero mi el plugin de validate no me lo esta validando, que es lo primero que se debe hacer para validar campos que aun no existen en el dom.

estoy usando este plugin
http://fgualambo.blogspot.mx/2013/01...bootstrap.html

pero si lo pongo en el ready no funciona
cua es la tecnica adecuada para estas situaciones estoy usando jQuery v1.7.2
y estoy tambien usando el metodo .on quise hacer esto pero nada

Código:

jQuery(document).on('submit', '#formPreins', function(e)
{
       jquery('#formPreins').validate({
            rules :{
                mi_email : {
                    required : true, //para validar campo vacio
                    email    : true  //para validar formato email
                },
                mi_nombre : {
                    required : true,
                    minlength : 3, //para validar campo con minimo 3 caracteres
                    maxlength : 9  //para validar campo con maximo 9 caracteres
                },
                mi_edad : {
                    required : true,
                    number : true   //para validar campo solo numeros
                },
                mi_pais : {
                    required :true,
                }

            }
        
});

y el submit ya lo detecta pero el validate singue sin validar

espero sus comentarios amigos

saludos

[fhederico]

Hola,

Consulta, que cargas dinamicamente? un input o un select ??

Bueno, lo que requiere es que tenga la clase, por ejemplo

Código:

<select name="hola" class="required">
    <option value=""> // Si por defecto tiene un valor 0, entonces el asume que se selecciono algo ya
</select>

Si es un Input

Código:

<input type="text" required="required" name="hola2">

Saludos

[chalchis]

bueno en lo dinamico en todo un grupo de campos select, radios, inputs
en realidad no estoy poniendo esos atributos que mencionas, los probare asi como lo mencionas

este es mi validador del plugin

Código:

jQuery(document).on('ready', carga);

function carga()
{

//bandera para validar campos en forma de sumario
    var submitted = false;

    jQuery('#formPreins').validate({
               
        rules: {
          
           'tx_programa': 'required',
           'tx_cur': { required: true, minlength: 3, alphanumerico: true },//alphanumeric es un metodo personal
           'tx_nom': { required: true, minlength: 3, maxlength: 85 },
           'tx_ap': { required: true, minlength: 3, maxlength: 85 },          
           'tx_fnacimiento': { required: true, date: true },
           'tx_naci': { required: true, minlength: 3, maxlength: 85 },
           'tx_civil': { required: true, minlength: 3, maxlength: 20 },
           'tx_origen': 'required',
           'tx_sexo': 'required',
           'tx_mail': { required: true, email: true },
           'tx_city': 'required',
           'tx_estado': 'required',
           'tx_col': 'required',
           'tx_dir': 'required',
           'tx_telA': { required: true, number: true },
           'tx_tut': 'required',
           'tx_citytut': 'required',
           'tx_ocup': 'required',
           'tx_teltut': 'required',
           'tx_trabajas': 'required',
           'tx_plantel': 'required',
           'tx_plantelcity': 'required',
           'tx_plantelstad': 'required',
           'tx_planteldir': 'required',
           'tx_tipouser': 'required'

        },
        messages: {
           
           'tx_programa': 'Favor de selecionar la carrera a cursar.',
           'tx_cur': { 
                        required: 'Favor de escribir el CURP del aspirante.',                                 
                        minlength: 'La longitud minima del CURP es de 3 caracteres.',
                        alphanumerico: 'Favor de escribir solo letras y numeros en el CURP.'  
                     },
           'tx_nom': { 
                        required: 'Favor de escribir el Nombre.', 
                        minlength: 'La longitud minima del Nombre del aspirante es de 3 caracteres.', 
                        maxlength: 'La longitud maxima del Nombre del aspirante es de 85 caracteres.'  
                     },
           'tx_ap':  { 
                        required: 'Favor de escribir el Apellido paterno.', 
                        minlength: 'El longitud minima del Apellido paterno del aspirante es de 3 caracteres.', 
                        maxlength: 'La longitud maxima del Apellido paterno del aspirante es de 85 caracteres.'  
                     },
           'tx_fnacimiento': { 
                                required: 'Favor de escribir la fecha de nacimiento.',                                 
                                date: 'Favor de escribir una fecha valida en formato AAAA-MM-DD'  
                             },
           'tx_naci':  { 
                        required: 'Favor de escribir el Lugar de nacimiento.', 
                        minlength: 'El longitud minima del Lugar de nacimiento del aspirante es de 3 caracteres.', 
                        maxlength: 'La longitud maxima del Lugar de nacimiento del aspirante es de 85 caracteres.'  
                     }, 
           'tx_civil':  { 
                        required: 'Favor de escribir el Estado civil actual.', 
                        minlength: 'El longitud minima del Estado civil del aspirante es de 3 caracteres.', 
                        maxlength: 'La longitud maxima del Estado civil del aspirante es de 20 caracteres.'  
                     },
           'tx_origen': 'Favor de escribir la nacionalidad.',
           'tx_sexo': 'Favor de selecionar el sexo.',
           'tx_mail': { 
                        required: 'Favor de escribir un mail para contactar.', 
                        email: 'Favor de escribir un mail valido del aspirante.' 
                      },
           'tx_city': 'Favor de escribir la ciudad.',
           'tx_estado': 'Favor de escribir el estado.',
           'tx_col': 'Favor de escribir la colonia.',
           'tx_dir': 'Favor de escribir el domicilio.',
           'tx_telA': { 
                        required: 'Favor de escribir el teléfono para contactar.', 
                        number: 'Favor de solo escribir numeros en el teléfono de localización ej: 9223055 o cel: 2299020355' 
                      },
           'tx_tut': 'Favor de escribir nombre del tutor.',
           'tx_citytut': 'Favor de escribir la ciudad del tutor.',
           'tx_ocup': 'Favor de escribir la ocupación del tutor.',
           'tx_teltut': { 
                        required: 'Favor de escribir el teléfono del tutor.', 
                        number: 'Favor de solo escribir numeros en el teléfono de tutor ej: 9223055 o cel: 2299020355' 
                      },
           'tx_trabajas': 'Favor de especificar si esta trabajando avtualmente.',
           'tx_plantel': 'Favor de escribir el nombre del plantel procedente.',
           'tx_plantelcity': 'Favor de escribir la ciudad del plantel procedente.',
           'tx_plantelstad': 'Favor de escribir el estado del plantel procedente.',
           'tx_planteldir': 'Favor de indicar el domicilio del plantel de procedencia.',
           'tx_tipouser': 'Favor de seleccionar el estado académico del aspirante.'



        },
        debug: true,
        ignore: '.ignore',        
        showErrors: function(errorMap, errorList) 
        {        
            //cuando entra aqui recorre los campos en cuales hay error de validacion

            if (submitted) 
            {
                var cadena = '<div class="custom-list"><i style="color:#B94A48;" class="moon-cancel-circle-2"></i><span style="color:#96152B;">error</span></div>';

                //jQuery('#contenidoError').append(cadena);
                var summary = '<div class="heading-wrapper"><h6><span class="heading-line-left"></span><strong>Errores detectados:</strong><span class="heading-line-right"></span></h6></div>';

                jQuery.each(errorList, function() 
                { 
                    summary += '<div class="custom-list"><i style="color:#B94A48;" class="moon-cancel-circle-2"></i><span style="color:#96152B;">'+this.message+'</span></div>'; 
                });

                //alert(summary);
                //console.log(summary);

                //hacemos visible el contenedor de errores
                jQuery('#errordiv').show();

                //mostrar en pantalla los errores
                jQuery("#contenidoError").html(summary);

                //mover el scroll
                var focalizar = jQuery('#contenidoError').position().top;

                //mover el scroll
                jQuery('html,body').animate({scrollTop: focalizar}, 1000);

                //bandera en false
                submitted = false;
            }
                
            //this.defaultShowErrors(); 

               
        },
        invalidHandler: function(form, validator) 
        {
            //cuando entra aqui es porque el submit no fue valido            
           
            var errors = validator.numberOfInvalids();

            if (errors)
            {
                //console.log("hay errores: "+errors);
                submitted = true;    
            }  
            
        },        
           //errorElement: 'div',
           //errorContainer: $('#errores'),
        submitHandler: function(form)
        {
            //cuando entra aqui es porque todo los campos fueron validado correctamente

            //limpiamos la zona de errores
            jQuery('#contenidoError').empty();

            //ocultamos
            jQuery('#errordiv').hide();

            //bloqueamos el envio de submit               
            enviarPreins();      
                         
        }

    });


}

[fhederico]

Pues agregale esos atributos y mi validador es mucho mas simple

Código:

{# Validacion #}
			$("#form_hola").validate({ //Nombre del formulario
				'errorClass': 'msgboxJQ errorJQ', //Clase que le agrega en caso de error
				errorElement:'div', //A que elemento
				'highlight': function (element, errorClass) { //Lo agrega
					$(element).addClass('failed');
				},
				'unhighlight': function (element, errorClass) { //La quita
					$(element).removeClass('failed');
				}
			});

Obviamente debe existe un div

Código:

<div class="msgbox error"></div>

Y bueno, el CSS que deseas que tenga eso.

Saludos