Validar campos selectivamente (campos requeridos y no requeridos)

[shawn1986]

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:

function validar(form){
    if (form.categoria.options[form.categoria.selectedIndex].value == 0){
    alert("Antes de continuar, selecciona una Categoría.");
    form.categoria.focus(); return false;
    }
    if (form.estado.options[form.estado.selectedIndex].value == 0){
    alert("Antes de continuar, selecciona un Estado.");
    form.estado.focus(); return false;
    }
    if (form.municipio.options[form.municipio.selectedIndex].value == 0){
    alert("Antes de continuar, selecciona un Municipio.");
    form.municipio.focus(); return false;
    }
form.submit();
}
 

ESTE ES EL CODIGO QUE VALIDA LOS CAMPOS (lo conseguí aquí mismo)

Código Javascript:

var form = document.getElementById("formulario");
form.addEventListener("submit", function(event){
  event.preventDefault();
  var campo = true,
      elementos = this.elements,
      total = elementos.length;
  
  for (var i = 0; i < total; i++){
    if (!elementos[i].value.length){
      alert ("Debes de ingresar el " + elementos[i].name);
      elementos[i].focus();
      campo = false;
      break;
    }
  }
  
  if (campo){
    this.submit();
  }
}, 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.

[carlillos]

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:

var form = document.getElementById("formulario");
form.addEventListener("submit", function(event){
  event.preventDefault();
  var campo = true,
      elementos = this.elements,
      total = elementos.length,
      opcional; //Variable de campo opcional
  
  for (var i = 0; i < total; i++){
    //Valor inicial de variable
    opcional = false;
    //Revisando si es campo opcional
    if (elementos[i].name === "imagen1" ||
          elementos[i].name === "imagen2" ||
          elementos[i].name === "imagen3" ||
          elementos[i].name === "imagen4" ||
          elementos[i].name === "imagen5" ||
          elementos[i].name === "imagen6") {
          //Activando variable opcional
          opcional = true;
    }
    if (!elementos[i].value.length && !opcional){
      alert ("Debes de ingresar el " + elementos[i].name);
      elementos[i].focus();
      campo = false;
      break;
    }
  }
  
  if (campo){
    this.submit();
  }
}, false);
 

Saludos.

[shawn1986]

Iniciado por carlillos

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:

var form = document.getElementById("formulario");
form.addEventListener("submit", function(event){
  event.preventDefault();
  var campo = true,
      elementos = this.elements,
      total = elementos.length,
      opcional; //Variable de campo opcional
  
  for (var i = 0; i < total; i++){
    //Valor inicial de variable
    opcional = false;
    //Revisando si es campo opcional
    if (elementos[i].name === "imagen1" ||
          elementos[i].name === "imagen2" ||
          elementos[i].name === "imagen3" ||
          elementos[i].name === "imagen4" ||
          elementos[i].name === "imagen5" ||
          elementos[i].name === "imagen6") {
          //Activando variable opcional
          opcional = true;
    }
    if (!elementos[i].value.length && !opcional){
      alert ("Debes de ingresar el " + elementos[i].name);
      elementos[i].focus();
      campo = false;
      break;
    }
  }
  
  if (campo){
    this.submit();
  }
}, 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.

[Alexis88]

Solo necesitas modificar la condición:

Código Javascript:

if ((elementos[i].tagName = "SELECT" && !elementos[i].value) || ((elementos[i].tagName == "INPUT" && elementos[i].type != "file") && !elementos[i].value.length)){
    //...
}
 

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