Problema con script jQuery y Ajax

[ariann]

Buenas tardes y gracias por pasar
Tengo un problema con 2 acciones que deseo ejecutar por separado.
Por un lado tengo un validador de formulario hecho en jquery, y por otro tengo un script que procesa vía ajax lo enviado en el formulario.
Bien, el problema es que cuando hago un submit realiza la validacion, pero tambien ejecuta el script ajax que procesa los datos.

index.php

Código HTML:

 <script src="../bootstrap/js/jquery.js"></script>
        <script src="../bootstrap/inc/ajaxProcesa.js"></script>
        <script src="../bootstrap/js/jquery.validate.js"></script>
        <script src="../bootstrap/js/validatePage2.js"></script>
.
.
.
<form>
.
.
.
</form>
.
.

validatePage2.js

Código:

$().ready(function() {

    $("#frmLoginUsuario").validate({
        rules: {
            emailLoginUsuario: {
                required: true,
                email: true,
                maxlength: 35

            }
        },
        messages: {
            emailLoginUsuario: {
                required: "Debe ingresar tu dirección de correo electronico!",
                email: "Ingresa una dirección email valida!",
                maxlength: "No puede ser mayor de 35 caracteres!"
            }
        }
    });
    
});

ajaxProcesa.js

Código:

function nuevoAjax() {
    var xmlhttp = false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }

    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }

    return xmlhttp;
}

function procesoLoginUsuario() {
    resul = document.getElementById('msgLoginUsuario');

    emailLoginUsuario = document.frmLoginUsuario.emailLoginUsuario.value;

    ajax = nuevoAjax();

    muestra();
    ajax.open("POST", "validaLoginUsuario.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("emailLoginUsuario=" + emailLoginUsuario);
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4) {
            oculta();
            resul.innerHTML = ajax.responseText;
        }

    };

}

Bueno ese es mi problema, entra a ambos mientras que yo necesito que se termine de ejecutar cuando da un error en el validador..

No quiero dar la impresion de querer todo servido, me gustaria alguna pista para poder esclarecer un poco mas este problema, soy nuevo con jquery, espero alguien con mas experiencia me pueda dar una mano

Como siempre muchas gracias por su tiempo!

[Alexis88]

Utiliza el método submitHandler para hacer la llamada a la función Ajax cuando los datos del formulario sean válidos.

Código Javascript:

$("#frmLoginUsuario").validate({
    rules: {
        emailLoginUsuario: {
            required: true,
            email: true,
            maxlength: 35
        }
    },
    messages: {
        emailLoginUsuario: {
            required: "Debe ingresar tu dirección de correo electronico!",
            email: "Ingresa una dirección email valida!",
            maxlength: "No puede ser mayor de 35 caracteres!"
        }
    },
    submitHandler: function() {
        procesoLoginUsuario();
    }
});
 

Cuando los datos del formulario sean válidos, se ejecutará la función procesoLoginUsuario().

Saludos

[ariann]

Muchas gracias @Alexis88 con eso se soluciona mi problema.
GRACIAS!