Ver Mensaje Individual
  #2 (permalink)  
Antiguo 02/03/2014, 20:01
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.437
Antigüedad: 8 años, 6 meses
Puntos: 935
Respuesta: validar envio de campo en blanco antes de enviar peticion por ajax

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:
Ver original
  1. <form id = "ejemplo" action = "destino.php" method = "post">
  2.     Nombre: <input type = "text" name = "nombre" id = "nombre" />
  3.     Edad: <input type = "text" name = "edad" id = "edad" />
  4.     <input type = "submit" value = "Enviar" />
  5. </form>
  6.  
  7. <div id = "respuesta"></div>

Código Javascript:
Ver original
  1. var formulario = document.getElementById("ejemplo"),
  2.     nombre = document.getElementById("nombre"),
  3.     edad = document.getElementById("edad"),
  4.     respuesta = document.getElementById("respuesta"),
  5.     valido = true;
  6.  
  7. formulario.addEventListener("submit", function(event){
  8.     event.preventDefault();
  9.     valido = nombre.length ? true : edad.length ? true : false;
  10.  
  11.     if (valido){
  12.         var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") || new ActiveXObject("Msxml2.XMLHTTP"),
  13.             datos = "nombre=" + nombre.value + "&edad=" + edad.value;
  14.  
  15.         ajax.open(this.getAttribute("method"), this.getAttribute("action"), true);
  16.         ajax.onreadystatechange = function(){
  17.             if (ajax.readyState == 4){
  18.                 switch (ajax.status){
  19.                     case 200:
  20.                         respuesta.innerHTML = ajax.responseText;
  21.                     break;
  22.  
  23.                     case 404:
  24.                         respuesta.innerHTML = "Error: La página solicitada no existe";
  25.                     break;
  26.  
  27.                     default:
  28.                         respuesta.innerHTML = ajax.status;
  29.                     break;
  30.                 }
  31.             }
  32.         };
  33.  
  34.         ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  35.         ajax.send(datos);
  36.     }
  37.     else
  38.         alert("Debe de ingresar todos los datos en el formulario");
  39. }, 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
__________________
«Laissez faire et laissez passer, le monde va de lui même»