Jquery Validate con Ajax

Hay ocasiones en donde tenemos que validar datos que se encuentran en nuestra Base de Datos, para eso Jquery Validate tiene un metodo para realizarlo de forma sencilla , veamos un ejemplo.

Si no sabes utilizar Jquery Validate entra aquí.
Veamos un ejemplo :


HTML - JAVASCRIPT

<script src="jquery.js"></script>
<script src="jquery.validate.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#mi_form').validate({
            rules : {
                'correo' : {
                    email : true,
                    remote: {
                        url: "enviar.php",
                        type: "post",
                        data: {
                            correo: function() {
                                return $( "#id_email" ).val();
                            }
                        }
                    }
                }
            },
            messages : {
                'correo' : {
                    remote : 'Este correo no es valido',
                    email : 'Debe ser un correo valido',
                    required : 'Debe llenar este campo'
                }
            },
            onkeyup : false  
        });
    })
</script>

<form id="mi_form" action="enviar.php" method="post">
    <input type="text" name="correo" class="required" id="id_email">
    <input type="text" name="nombre" class="required">
    <input type="submit" value="Enviar!">
</form>


PHP : Enviar.php

if($_POST['correo']!='gualambo@gmail.com'){
    echo "true";
}else{
    echo "false";
}


OBSERVACIÓN

Si hay algo que debemos saber, es que Jquery Validate hace la validación cada vez que se presione una tecla en los campos, sin embargo eso no queremos , ya que estaríamos llamando al servidor a cada rato, debido a eso debemos utilizar el método onkeyup, para  así evitar esa llamada al servidor cada vez que se presione una tecla.



Pronto subiré un video explicando este código, por el momento puedes manipularlo tal que se acomode a tus proyectos, Saludos

No hay comentarios:

Publicar un comentario