Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de validar envio de campo en blanco antes de enviar peticion por ajax en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/03/2014, 17:16
ruben_chirinos_1985
Invitado
 
Mensajes: n/a
Puntos:
validar envio de campo en blanco antes de enviar peticion por ajax

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:
Ver original
  1. <script>
  2.         //Expresión para validar un correo electrónico
  3.         var expr = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
  4.         //Expresión para validar edad de 18 a 60 años
  5.         var expr2 = /^1[8-9]|[2-5]\d|60$/;
  6.         $(document).ready(function(){
  7.             //función click
  8.             $("#bEnviar").click(function(){
  9.                 //Guardar en variables el valor que tengan las cajas de texto
  10.                 //Por medio de los id's
  11.                 //Y tener mejor manipulación de dichos valores
  12.                 var nombre = $("#ced_benef").val();
  13.  
  14.                 // --- Condicionales anidados ----
  15.                 //Si nombre está vacío
  16.                 //Muestra el mensaje
  17.                 //Con false sale de los if's y espera a que sea pulsado de nuevo el botón de enviar
  18.                 if(nombre == ""){
  19.                     $("#mensaje1").fadeIn("slow");
  20.                     return true;
  21.                 }
  22.                 //en otro caso, el mensaje no se muestra
  23.                 else{
  24.                     $("#mensaje1").fadeOut();
  25.  
  26.                    
  27.                    
  28.                 }
  29.  
  30.             });//click
  31.         });//ready
  32.     </script>
  #2 (permalink)  
Antiguo 02/03/2014, 21:01
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: ajax, blanco, campo, formulario, jquery, peticion, valor, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:40.