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

[ruben_chirinos_1985]

hola amigos como estas tengo un problema que no e logrado solucionarlo y la verdad no e logrado nada, es que tengo un formulario donde ingreso un numero de cedula para hacer unas consultas pero el envio lo realizo por medio de ajax de esta manera onClick="buscar_beneficiario(this.form.ced_benef.v alue)" la cosa es que si le doy clic al boton con el campo cedula en blanco igual me hace el envio estando el campo en blanco, y quiero validarlo que para poder enviarse la peticion a ajax se escribe en el campo algun valor pero no me da nada realice un ejemplo usando jquery y me sale el aviso de campo vacion pero igual me realiza la peticion de ajax e aqui el ejemplo

Código Javascript:

<script>
        //Expresión para validar un correo electrónico
        var expr = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
        //Expresión para validar edad de 18 a 60 años
        var expr2 = /^1[8-9]|[2-5]\d|60$/;
        $(document).ready(function(){
            //función click
            $("#bEnviar").click(function(){
                //Guardar en variables el valor que tengan las cajas de texto
                //Por medio de los id's
                //Y tener mejor manipulación de dichos valores
                var nombre = $("#ced_benef").val();
 
                // --- Condicionales anidados ----
                //Si nombre está vacío
                //Muestra el mensaje
                //Con false sale de los if's y espera a que sea pulsado de nuevo el botón de enviar
                if(nombre == ""){
                    $("#mensaje1").fadeIn("slow");
                    return true;
                }
                //en otro caso, el mensaje no se muestra
                else{
                    $("#mensaje1").fadeOut();
 
                   
                    
                }
 
            });//click
        });//ready
    </script>
 

[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