Campos obligatorios en JavaScript

17/Abr/2008 JavaScript , , 5 Comentarios

La obligatoriedad de los campos del formulario dependerá del tipo de campo que estemos utilizando. Así, la obligatoriedad de un campo de texto puede ser desde que tenga algún valor, hasta que su formato sea uno específico. Si hablamos de campos de selección o en un combo puede ser que esté alguna de las opciones marcada. Así con todos los tipos de elementos del formulario.

Lo primero que vamos a hacer para explicar el ejemplo va a ser construir un simple formulario:

  1.  
  2. <form id="formulario">
  3. <label for="nombre">Nombre:</label>
  4. <input type="text" id="nombre"/><br>
  5. <label for="email">E-Mail:</label>
  6. <input type="text" id="email"/><br>
  7.  
  8. Deporte favorito:
  9. <input type="checkbox" name="deporte" id="futbol" value="futbol"/>
  10. <label for="futbol">Futbol</label>
  11. <input type="checkbox" name="deporte" id="baloncesto" value="baloncesto"/>
  12. <label for="baloncesto">Baloncesto</label>
  13. <input type="checkbox" name="deporte" id="atletismo" value="atletismo"/>
  14. <label for="atletismo">Atletismo</label><br>
  15.  
  16. <button onClick="validar();">Validar</button>
  17.  
  18. </form>
  19.  

Vemos que el botón de validación llama a la función validar(). Dentro de esta función dispondremos todos los controles de obligatoriedad de los campos.

El primer control de obligatoriedad es el de los campos de texto. Para ello accedemos directamente a la colección de los elementos del formulario mediante .elements.

  1. camposTexto = document.getElementById("formulario").elements;

Hay que tener en cuenta que esto nos devuelve todos los elementos. Es decir, en nuestro caso 6 elementos. Los dos campos de texto, las 3 opciones y el botón. Como solo nos interesan los campos de texto, lo que vamos a hacer es filtrar por aquellos elementos que sean del tipo "text".

  1. if (camposTexto[x].value == ''
  2. && camposTexto[x].type=='text'){...}

Si el campo es de texto y está vacío le sacamos un error avisándole y terminamos la ejecución del método mediante un return false.

  1. if (camposTexto[x].value == ''
  2. && camposTexto[x].type=='text'){
  3. alert("El campo " + camposTexto[x].id + " está vacio y es OBLIGATORIO");
  4. return false;
  5. }
  6. }

Lo siguiente que vamos a validar son los campos de opciones. En este caso vamos a acceder por nombre mediante el método getElementsByName. Ya que todos los elementos tienen el name "deporte".

  1. camposCheck = document.getElementsByName("deporte");

Lo que nos interesa es encontrar alguno que esté selecionado. Es por ello que haremos un bucle cuya condición de salida sea el haber recorrido todos los elementos o haber encontrado alguno marcado.

  1. opcion = false;
  2. x = 0;
  3.  
  4. while (x<camposCheck.length && !opcion) {
  5. if (camposCheck[x].checked){
  6. opcion = true;
  7. }
  8. x++;
  9. }

En caso de haber recorrido todos y no haber encontrado ninguno activado, es entonces cuando sacamos el error.

  1. if (!opcion)
  2. alert("Tienes que seleccionar alguna opción");

Vídeos sobre Javascript


5 comentarios en “Campos obligatorios en JavaScript”

Víctor Cuervo

Jose

tengo la misma inquietud que kali

sAludos

Víctor Cuervo

Kali

La idea es muy buena, pero al validar, si hemos introducido, por ejemplo, información de nombre pero no de email, salta la alerta y después se vuelve a resetear todo el formulario. Esto es un problema muy grande a la hora de usar en formularios con muchos (15-20) campos.

¿Tenéis alguna solución a esto?

Víctor Cuervo

Angel

haber si me puedes ayudar, tengo un formulario terminado y quisiera hacer los campos obligatirios pero con lo que has puesto aqui no hay manera, haber si me podrias ayudar saludos

Víctor Cuervo

angeles

espero me puedas ayudar quiero poner comentarios en mi pagina web!! te lo agradeceria muchosss bss 🙂

Víctor Cuervo

Jose Mateos

Esta magnifico tu website y muy bien explicado, muy util lo de visualizar ejemplo.

Felicidades, seguir así.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*