Jquery - Validation | Validar solo al enviar (Submit)

[kid]

Estoy validando un formulario con Jquery usando el plugins validation.

Pasa que me valida cuando un campo pierde el foco... quiere que se validen todos los campos SOLAMENTE cuando presione el botón enviar.

¿Saben como lograr eso?

Saludos!

[alexg88]

¿Puedes poner el código que tienes hecho hasta ahora?

Para ver que estás haciendo.

[kid]

Código:

$(document).ready(function() {

$("#form1").validate({
rules: {
    nombre : "required"
},
messages : {
   nombre : "Debes ingresar tu nombre completo<br />"
}
});

});

Principalmente eso... cuando el campo "nombre" pierde el foco lo valida, y necesito que la validación se haga solamente cuando se envié el formulario

[alexg88]

Tienes que jugar con las opciones del plugin:

Código Javascript:

$(document).ready(function() {
 
$("#form1").validate({
rules: {
    nombre : "required"
},
messages : {
   nombre : "Debes ingresar tu nombre completo<br />"
},
onfocusout: false,
onkeyup: false,
onclick: false
});
 
});
 

El link a la documentación oficial, por si quieres ver más opciones: http://docs.jquery.com/Plugins/Valid...idate#toptions

[kid]

Wauuuuu, funcionó perfecto. No me había fijado en esas opciones :(

Una última pregunta... cuando presiono el botón (submit), efectivamente valida, pero apesar de que muestra los errores, igualmente envía el formulario.

Que hacer en ese caso?

Saludos!

[alexg88]

Pues en principio no debería hacer submit. Pon el código del formulario y del javascript para ver como lo haces.

[baxter]

Hola, tengo exactamente el mismo problema que Kid, al dar clic en submit valida el formulario pero aún así lo envía, el código JavaScript es:

Código:

<script language="javascript" src="jquery.validate.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });
    $("#bcliente").validate({
	  rules: {
	    clave : "required"
	},
	messages : {
	   clave : "Se requiere clave"
	},
    });
    $('#form, #fat, #bcliente').submit(function() {
        $.ajax({
            type: 'POST',		
	//					beforeSend: validate('#bcliente'),				
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                $('#result').html(data);

            }
        })
        
        return false;
    }); 
})  
</script>

Gracias por su ayuda

[InKarC]

La coma despues de clave : "required"} no debería estar hay.

[jmm87]

Código Javascript:

$(document).ready(function() {
    $("#formRepresentante").validate({
        rules: {
            nombre: { required: true},
            apellido_materno: { required: true},
            apellido_paterno: { required: true},
            email: { required: true},
            telefono: { required: true}
        },
        messages: {
            nombre: "El campo 'nombre' no puedo estar vacio.",
            apellido_materno: "El campo 'apellido materno' no puede estar vacio.",
            apellido_paterno : "El campo 'apellido paterno' no puede estar vacio.",
            email : "Por favor revise el campo 'email'.",
            telefono : "Por favor revise el campo 'telefono'.",
        },
 
        onfocusout: false,
        onkeyup: false,
        onclick: false,
 
        errorPlacement: function (error, element) {
            Materialize.toast(error.text(), 6000);
        },
        submitHandler: function(form) {
          form.submit();
        }
    });
});
 

Ahi tenes mi ejemplo con la opcion para que no mande si hay campos no validados correctamente