Foros del Web » Programando para Internet » Javascript »

Validar campos selectivamente (campos requeridos y no requeridos)

Estas en el tema de Validar campos selectivamente (campos requeridos y no requeridos) en el foro de Javascript en Foros del Web. Antes que nada un saludo a todos los usarios y administradores de este gran foro. Sin enrrollarme demasiado quisiera ver si alguien me puede echar ...
  #1 (permalink)  
Antiguo 05/01/2016, 14:53
 
Fecha de Ingreso: julio-2009
Mensajes: 63
Antigüedad: 11 años, 9 meses
Puntos: 0
Validar campos selectivamente (campos requeridos y no requeridos)

Antes que nada un saludo a todos los usarios y administradores de este gran foro.

Sin enrrollarme demasiado quisiera ver si alguien me puede echar un cable con el siguiente problema de validación.

Cuento con un formulario dinámico -según la categoría seleccionada en un campo select, se crea un formulario u otro-, ahora bien, requiero validar del lado del cliente (antes de hacerlo del lado del servidor), los campos que se van a enviar por formulario.

El tema es que hay campos obligatorios (casi todos), pero también tengo 6 campos tipo "input type=file" es decir de carga de archivos que son para cargar imágenes, estas imágenes serán opcionales, es decir, si el usuario tiene imágenes descriptivas, podrá subirlas, en caso contrario, el formulario debería poder enviarse sin problemas.

Ahora bien, cuento con 2 códigos, uno que se encarga de validar que se haya seleccionado una categoría para evitar enviar el campo en blanco (valida los campos select) y otro que me hace una validación global de todo el formulario (campos del tipo input type=text ), mismo que funciona perfectamente bien, a excepción de que no permite el envío del formulario porque me hace también la validación de las imágenes las cuales no son obligatorias.

ESTE ES EL CODIGO QUE VALIDA LOS SELECT
Código Javascript:
Ver original
  1. function validar(form){
  2.     if (form.categoria.options[form.categoria.selectedIndex].value == 0){
  3.     alert("Antes de continuar, selecciona una Categoría.");
  4.     form.categoria.focus(); return false;
  5.     }
  6.     if (form.estado.options[form.estado.selectedIndex].value == 0){
  7.     alert("Antes de continuar, selecciona un Estado.");
  8.     form.estado.focus(); return false;
  9.     }
  10.     if (form.municipio.options[form.municipio.selectedIndex].value == 0){
  11.     alert("Antes de continuar, selecciona un Municipio.");
  12.     form.municipio.focus(); return false;
  13.     }
  14. form.submit();
  15. }


ESTE ES EL CODIGO QUE VALIDA LOS CAMPOS (lo conseguí aquí mismo)
Código Javascript:
Ver original
  1. var form = document.getElementById("formulario");
  2. form.addEventListener("submit", function(event){
  3.   event.preventDefault();
  4.   var campo = true,
  5.       elementos = this.elements,
  6.       total = elementos.length;
  7.  
  8.   for (var i = 0; i < total; i++){
  9.     if (!elementos[i].value.length){
  10.       alert ("Debes de ingresar el " + elementos[i].name);
  11.       elementos[i].focus();
  12.       campo = false;
  13.       break;
  14.     }
  15.   }
  16.  
  17.   if (campo){
  18.     this.submit();
  19.   }
  20. }, false);

Mi duda es, hay alguna manera de unificar ambos códigos para que un solo código me pueda validar la selección de elementos de tipo select y los campos vacios de tipo text y que a su vez por medio de un identificador id omita la validación de los campos input type=file (campos de imágenes no obligatorios).

He buscado por todos lados y es muy raro que esta duda no se haya dado, pues todos los códigos de validación de formularios que he visto, validan todos los campos como (todos obligatorios), se me hace raro que nadie haya tenido la necesidad de validar campos requeridos y omitir los no requeridos, así como también la validación de campos de tipo select, todo en un mismo código.

De antemano muchas gracias por todos los comentarios, consejos y sugerencias.

Última edición por shawn1986; 05/01/2016 a las 17:33
  #2 (permalink)  
Antiguo 05/01/2016, 21:59
Avatar de carlillos  
Fecha de Ingreso: febrero-2007
Ubicación: México
Mensajes: 245
Antigüedad: 14 años, 3 meses
Puntos: 21
Respuesta: Validar campos selectivamente (campos requeridos y no requeridos)

En tu segundo código estás haciendo un loop para todos los elementos sin distinción, si quieres que haya algunos opcionales tienes que crear una excepciónes.

Código Javascript:
Ver original
  1. var form = document.getElementById("formulario");
  2. form.addEventListener("submit", function(event){
  3.   event.preventDefault();
  4.   var campo = true,
  5.       elementos = this.elements,
  6.       total = elementos.length,
  7.       opcional; //Variable de campo opcional
  8.  
  9.   for (var i = 0; i < total; i++){
  10.     //Valor inicial de variable
  11.     opcional = false;
  12.     //Revisando si es campo opcional
  13.     if (elementos[i].name === "imagen1" ||
  14.           elementos[i].name === "imagen2" ||
  15.           elementos[i].name === "imagen3" ||
  16.           elementos[i].name === "imagen4" ||
  17.           elementos[i].name === "imagen5" ||
  18.           elementos[i].name === "imagen6") {
  19.           //Activando variable opcional
  20.           opcional = true;
  21.     }
  22.     if (!elementos[i].value.length && !opcional){
  23.       alert ("Debes de ingresar el " + elementos[i].name);
  24.       elementos[i].focus();
  25.       campo = false;
  26.       break;
  27.     }
  28.   }
  29.  
  30.   if (campo){
  31.     this.submit();
  32.   }
  33. }, false);

Saludos.
  #3 (permalink)  
Antiguo 05/01/2016, 23:03
 
Fecha de Ingreso: julio-2009
Mensajes: 63
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Validar campos selectivamente (campos requeridos y no requeridos)

Cita:
Iniciado por carlillos Ver Mensaje
En tu segundo código estás haciendo un loop para todos los elementos sin distinción, si quieres que haya algunos opcionales tienes que crear una excepciónes.

Código Javascript:
Ver original
  1. var form = document.getElementById("formulario");
  2. form.addEventListener("submit", function(event){
  3.   event.preventDefault();
  4.   var campo = true,
  5.       elementos = this.elements,
  6.       total = elementos.length,
  7.       opcional; //Variable de campo opcional
  8.  
  9.   for (var i = 0; i < total; i++){
  10.     //Valor inicial de variable
  11.     opcional = false;
  12.     //Revisando si es campo opcional
  13.     if (elementos[i].name === "imagen1" ||
  14.           elementos[i].name === "imagen2" ||
  15.           elementos[i].name === "imagen3" ||
  16.           elementos[i].name === "imagen4" ||
  17.           elementos[i].name === "imagen5" ||
  18.           elementos[i].name === "imagen6") {
  19.           //Activando variable opcional
  20.           opcional = true;
  21.     }
  22.     if (!elementos[i].value.length && !opcional){
  23.       alert ("Debes de ingresar el " + elementos[i].name);
  24.       elementos[i].focus();
  25.       campo = false;
  26.       break;
  27.     }
  28.   }
  29.  
  30.   if (campo){
  31.     this.submit();
  32.   }
  33. }, false);

Saludos.

carlillos;4767798 Te agradezco infinitamente tu ayuda, tu código funciona que no veas, va de 10, ahora tengo una duda, me valida perfectamente bien los campos input, pero ¿Qué pasa con los campos de selección?, si me pudieras echar una mano para adaptar mi primer codigo al que ya me has proporcionado, para lograr una validación completa de todos los campos, es decir, tanto los input como los select, y de paso dejar un codigo muy util de validación para cualquiera que lo necesite.

Mi primer codigo funciona bien, solo que no se adapta como debería al segundo ni al tuyo, pues si falta un campo input y un select, saltan los dos avisos uno seguido del otro, sin respetar algun tipo de estructura switch o break que vaya detectando segun el orden de los campos.

De antemano te agradezco muchisimo tu ayuda, si es posible que me orientes en lo que te solicito yo mismo trataría de desarrollarlo.
  #4 (permalink)  
Antiguo 06/01/2016, 02:22
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.512
Antigüedad: 9 años, 5 meses
Puntos: 957
Respuesta: Validar campos selectivamente (campos requeridos y no requeridos)

Solo necesitas modificar la condición:
Código Javascript:
Ver original
  1. if ((elementos[i].tagName = "SELECT" && !elementos[i].value) || ((elementos[i].tagName == "INPUT" && elementos[i].type != "file") && !elementos[i].value.length)){
  2.     //...
  3. }

De esta manera, si el elemento es un <select> y su valor es falso (o cero) o si el elemento es un <input> pero no es de tipo "file" y no posee contenido, se realizará la validación.

Un saludo
__________________
«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: campos, formulario, funciones, select-html, validación
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 01:02.