[SOLUCIONADO] Jquery Validate al cargar un campo por Ajax

[fhederico]

Hola,

Estuve buscando pero no encontre nada para poder solucionar esto, el problema es el siguiente, tengo un formulario que tiene los siguientes campos (Html normal):

Código HTML:

<form id="form_candidato" action="#" method="post">
 
Pais:
 
<select required="required" onchange="traeRegiones(this.value)" name="paisid" class="div_select" id="paisid">
        <option value="0">Elige una opción</option>
//Opciones
            </select>
 
//Aqui se cargarian las regiones en un select
<div id="div_regiones"></div>
 
Nombre:
<input type="text" class="div_input" maxlength="255" required="required" name="formNombre" id="formNombre">
 
Curso:
<input type="text" class="div_input" maxlength="255" required="required" name="formCurso" id="formCurso">
 
 
<input type="submit" value="Enviar">
 
</form>
 

Cuando una persona selecciona el Pais, se llama mediante un "onchange" a la funcion "traeRegiones" las cuales obviamente trae las regiones segun el pais seleccionado por Ajax.

Si se envia el formulario se valida con "validate"

Código Javascript:

<script type="text/javascript"> 
        
        $(document).ready(function() 
        {
 
            $("#form_candidato").validate({
                debug: true,
                'errorClass': 'msgboxJQ errorJQ',
                errorElement:'div',
                'highlight': function (element, errorClass) {
                    $(element).addClass('failed');
                },
                'unhighlight': function (element, errorClass) {
                    $(element).removeClass('failed');
                }
            });
        });
 
 
        function traeRegiones(id)
        {
$('#div_regiones').load("{{ path('traeRegionxPais') }}/"+id);
        }
    </script>
 

El problema es que si yo pulso enviar al formulario, me despliega el mensaje "Este campo es obligatorio." en los 3 campos originales, pero no en el campo "region".

Una solucion que encontre fue cargar despues del load la validacion (callback) pero obviamente aqui no puedo, ya que requiero que la persona pulse en el pais para poder traer la region, la duda finalmente es... existe alguna manera de poder agregar una validacion por JQuery al campo region?? o de plano simplemente le agrego una validacion con Javascript no mas

Gracias de ante mano

[maycolalvarez]

recuerde que cuando actualiza el select dependiente, este se reescribe por completo, perdiendo incluso los eventos y la asignación de jquery validate, debe volverle a aplicar la validación cuando sea recargado vía ajax dicho objeto.

recuerde: los objetos insertados o modificados por AJAX se incluyen al DOM en el futuro, por lo cual no existen al momento de asignar desde el domready

[negro1985]

utiliza la etiqueta

$("#div_regiones'").load("regiones.php",{"id_pais" :"1"},function(data){
$(this).html("<script type="text/javascript" src="validación.js"><script>"data);
});

[fhederico]

Hola maycolalvarez,

Lo que mencionas ya lo sabia, de hecho lo puse como nota casi al final, gracias igualmente.


negro1985, estuve probando esto, pero no me funciona aun, creo que hare una validacion mas simple y me ahorrare problemas, gracias.

Saludos

[fhederico]

En fin...

Viendo otra cosa por error logre sacar esto... al final... no habia que hacer nada del otro mundo, a pesar de que son instancias distintas igualmente entran en la validacion del JQuery lo unico que habia que hacer es:

Para los campos tipo select

Código:

class="required"

Si dejas

Código:

class="required"  required="required"

No funciona (que era como lo tenia )

Y para los input, solamente colocarles

Código:

  required="required"

Y listo... que cosas no...