VALIDANDO ANDO Y NO ME VOY QUEJANDO (PARTE 2. JAVASCRIPT)

<script src=”my own” title=”parte 2 javascript”>

En el post anterior, había creado un ejemplo de formulario típico que requería ser validado. He aquí el código:

<h3>Ingrese sus datos</h3>
<form action="#" name="datosPersonales" id="formulario" onsubmit="validarFormulario(this)">
	<label for="nombre">Nombre:</label>
	<input type="text" name="nombre" id="nombre">
	<label for="apellido">Apellido:</label>
	<input type="text" name="apellido" id="apellido">
	<label for="direccion">Dirección:</label>
	<textarea style="resize: none;" name="direccion" id="direccion"></textarea>
	<label for="correo">Email: </label>
	<input type="email" name="correo" id="correo">
	<label for="edad">Edad:</label>
	<input type="number" name="edad" id="edad">
	<label for="Sexo">Sexo:</label>
	<input type="radio" name="sexo" id="sexo_M" value="M">Masculino
	<input type="radio" name="sexo" id="sexo_F" value="F">Femenino
	<label for="actividades">Actividades:</label>
	<input type="checkbox" name="cine" id="cine" value="cine">Cine
	<input type="checkbox" name="teatro" id="teatro" value="teatro">Teatro
	<input type="checkbox" name="radio" id="radio" value="radio">Radio
	<input type="submit" value="Confirmar" id="confirmar">
</form>

No voy a enfocarme en el CSS, sólo en las formas en las que pueden validarse los campos. Revisa el post señalado al inicio.

Manos a la ubre…

Podemos validar campo por campo usando name, id o value dentro del método validarFormulario(), sin embargo, una forma fácil sería usar una pequeña rutina y usar los mensajes de error por defecto del navegador:

function validarFormulario(form){
	for (var i = 0; i < form.length; i++) {
		if (!form[i].checkValidity()){
			return;
		}
	}
}

El método checkValidity() tiene implementados una serie de constraints para validar la mayoria de los campos del tipo <input>. La idea es simple: se itera sobre toda la longitud del arreglo y se llama al método antes mencionado, y éste retornará true o false dependiendo del constraint asignado al elemento HTML como atributo. Puedes ver los constraints de validación para cada elemento <input> en este enlace.

Aquí van algunos ejemplos puntuales del uso de estos constraints:

  • Un campo requerido (no puede estar vacío):
    <input type="text" required>
  • Un campo que sólo acepte caracteres alfanuméricos y espacios:
    <input type="text" pattern="\w+"> (usamos nuestras amigas, las Expresiones Regulares 🙂
  • Un campo que acepte sólo números entre 1 y 10:
    <input type="number" pattern="\d+" min="1" max="10">
  • Un campo de tipo email ya genera un constraint para validar emails:
    <input type="email">

Ahora bien, esta es una forma sencilla de validar campos, pero tal vez sea poco óptima para la práctica. Por desgracia, el método checkValidity() NO afecta a los elementos de tipo checkbox, para ello podríamos tomar dichos elementos por separado e ir validando cada uno de ellos usando la referencia absoluta al nombre del formulario, al nombre del elemento y a la bandera checked, por ejemplo.

if (	!document.datosPersonales.cine.checked &&
	!document.datosPersonales.teatro.checked &&
	!document.datosPersonales.radio.checked) {
		alert('debe seleccionar al menos una opción');
		return;
	}

Este código iría antes del bucle for que valida el resto de los <input>. Ahora bien, con tan sólo ver el código, se entiende que esta sea una de las razones por las que algunos (muchos) desarrolladores prefieren validar los campos de formulario con librerías externas, tales como jQuery Validation o validate.js, de las cuales hablaré en un próximo post.

¡Gracias por su paciencia! 😉

</script>

Anuncios