validar envio de campo en blanco antes de enviar peticion por ajax

[Alexis88]

Para anular el accionar de un evento, debes utilizar el método preventDefault, una vez neutralizado, puedes realizar las acciones que desees.

El evento que se produce cuando se envía un formulario se llama submit, por lo que para realizar la validación, primero debes anularlo, luego realizas la validación y en base al resultado de esa operación, envías o no los datos del formulario. Un pequeño ejemplo.

Código HTML:

<form id = "ejemplo" action = "destino.php" method = "post">
    Nombre: <input type = "text" name = "nombre" id = "nombre" />
    Edad: <input type = "text" name = "edad" id = "edad" />
    <input type = "submit" value = "Enviar" />
</form>
 
<div id = "respuesta"></div>
 

Código Javascript:

var formulario = document.getElementById("ejemplo"),
    nombre = document.getElementById("nombre"),
    edad = document.getElementById("edad"),
    respuesta = document.getElementById("respuesta"),
    valido = true;
 
formulario.addEventListener("submit", function(event){
    event.preventDefault();
    valido = nombre.length ? true : edad.length ? true : false;
 
    if (valido){
        var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") || new ActiveXObject("Msxml2.XMLHTTP"),
            datos = "nombre=" + nombre.value + "&edad=" + edad.value;
 
        ajax.open(this.getAttribute("method"), this.getAttribute("action"), true);
        ajax.onreadystatechange = function(){
            if (ajax.readyState == 4){
                switch (ajax.status){
                    case 200:
                        respuesta.innerHTML = ajax.responseText;
                    break;
 
                    case 404:
                        respuesta.innerHTML = "Error: La página solicitada no existe";
                    break;
 
                    default:
                        respuesta.innerHTML = ajax.status;
                    break;
                }
            }
        };
 
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajax.send(datos);
    }
    else
        alert("Debe de ingresar todos los datos en el formulario");
}, false);
 

En este pequeño ejemplo, tenemos un formulario con los campos nombre y edad, además de un botón que al pulsarlo, ejecutará el evento submit del formulario. Más abajo, hay un Div en el que se mostrará la respuesta del servidor puesto que haremos una petición asíncrona que es lo que leí que deseas hacer.

En el código JS, tomo a todos los elementos por su Id y declaro una variable valido que será el comodín que usaremos para saber si los datos del formulario son válidos y así podamos realizar el envío de los mismos para su procesamiento. Su valor inicial será true. Enseguida, al ejecutarse el evento submit, lo anulo y proceso a realizar la validación; si se ingresaron datos en la caja del nombre, le asigno el valor true a la variable valido, caso contrario, le asigno false. El mismo procedimiento se repetirá para la caja de la edad.

Una vez realizada esta validación, evaluamos el valor de la variable valido. Si es verdadera, es decir, true, realizamos la petición asíncrona (Ajax), caso contrario, muestro un mensaje de alerta en donde le indico al usuario que debe ingresar todos los datos en el formulario. La petición asíncrona es como cualquier otra, de modo que si conoces sobre el tema, no hay mucho que explicar.

Este es sólo un ejemplo de validación para evitar que se envíen datos nulos, pero lo ideal es que realices otro tipo de validaciones, como del formato de los datos y caracteres ingresados, haciendo uso de expresiones regulares para validar la información.

Saludos