0
La principal utilidad de jаvascript en el manejo de los formularios es la validación de los datos introducidos por los s. Antes de enviar un formulario al servidor, se recomienda validar mediante jаvascript los datos insertados por el . De esta forma, si el ha cometido algún error al rellenar el formulario, se le puede notificar de forma instantánea, sin necesidad de esperar la respuesta del servidor.Notificar los errores de forma inmediata mediante jаvascript mejora la satisfacción del con la aplicación (lo que técnicamente se conoce como "mejorar la experiencia de ") y ayuda a reducir la carga de procesamiento en el servidor.
Normalmente, la validación de un formulario consiste en llamar a una función de validación cuando el pulsa sobre el botón de envío del formulario. En esta función, se comprueban si los valores que ha introducido el cumplen las restricciones impuestas por la aplicación.
Aunque existen tantas posibles comprobaciones como elementos de formulario diferentes, algunas comprobaciones son muy habituales: que se rellene un campo obligatorio, que se seleccione el valor de una lista desplegable, que la dirección de email indicada sea correcta, que la fecha introducida sea lógica, que se haya introducido un número donde así se requiere, etc.
A continuación se muestra el código jаvascript básico necesario para incorporar la validación a un formulario:
<form action="" method="" id="" name="" onsubmit="return validacion()">
...
</form>function validacion() {
if (condicion que debe cumplir el primer campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
else if (condicion que debe cumplir el segundo campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
...
else if (condicion que debe cumplir el último campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
// Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true
return true;
}Así, si el evento onsubmit devuelve el valor true, el formulario se envía como lo haría normalmente. Sin embargo, si el evento onsubmit devuelve el valor false, el formulario no se envía. La clave de esta técnica consiste en comprobar todos y cada uno de los elementos del formulario. En cuando se encuentra un elemento incorrecto, se devuelve el valor false. Si no se encuentra ningún error, se devuelve el valor true.
Por lo tanto, en primer lugar se define el evento onsubmit del formulario como:
onsubmit="return validacion()"Dentro de la función validacion() se comprueban todas las condiciones impuestas por la aplicación. Cuando no se cumple una condición, se devuelve false y por tanto el formulario no se envía. Si se llega al final de la función, todas las condiciones se han cumplido correctamente, por lo que se devuelve true y el formulario se envía.
La notificación de los errores cometidos depende del diseño de cada aplicación. En el código del ejemplo anterior simplemente se muestran mensajes mediante la función alert() indicando el error producido. Las aplicaciones web mejor diseñadas muestran cada mensaje de error al lado del elemento de formulario correspondiente y también suelen mostrar un mensaje principal indicando que el formulario contiene errores.
Una vez definido el esquema de la función validacion(), se debe añadir a esta función el código correspondiente a todas las comprobaciones que se realizan sobre los elementos del formulario. A continuación, se muestran algunas de las validaciones más habituales de los campos de formulario.
Validar un campo de texto obligatorio
Se trata de forzar al a introducir un valor en un cuadro de texto o textarea en los que sea obligatorio. La condición en jаvascript se puede indicar como:
valor = document.getElementById("campo").value;
if( valor == null || valor.length == 0 || /^s+$/.test(valor) ) {
return false;
}La palabra reservada null es un valor especial que se utiliza para indicar "ningún valor". Si el valor de una variable es null, la variable no contiene ningún valor de tipo objeto, array, numérico, cadena de texto o booleano.
La segunda parte de la condición obliga a que el texto introducido tenga una longitud superior a cero caracteres, esto es, que no sea un texto vacío.
Por último, la tercera parte de la condición (/^s+$/.test(valor)) obliga a que el valor introducido por el no sólo esté formado por espacios en blanco. Esta comprobación se basa en el uso de "expresiones regulares", un recurso habitual en cualquier lenguaje de programación pero que por su gran complejidad no se van a estudiar. Por lo tanto, sólo es necesario copiar literalmente esta condición, poniendo especial cuidado en no modificar ningún carácter de la expresión.
Validar un campo de texto con valores numéricos
Se trata de obligar al a introducir un valor numérico en un cuadro de texto. La condición jаvascript consiste en:
valor = document.getElementById("campo").value;
if( isNaN(valor) ) {
return false;
}A continuación se muestran algunos resultados de la función isNaN():
isNaN(3); // false
isNaN("3"); // false
isNaN(3.3545); // false
isNaN(32323.345); // false
isNaN(+23.2); // false
isNaN("-23.2"); // false
isNaN("23a"); // true
isNaN("23.43.54"); // trueValidar que se ha seleccionado una opción de una lista
Se trata de obligar al a seleccionar un elemento de una lista desplegable. El siguiente código jаvascript permite conseguirlo:
indice = document.getElementById("opciones").selectedIndex;
if( indice == null || indice == 0 ) {
return false;
}
<select id="opciones" name="opciones">
<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>Validar una dirección de email
Se trata de obligar al a introducir una dirección de email con un formato válido. Por tanto, lo que se comprueba es que la dirección parezca válida, ya que no se comprueba si se trata de una cuenta de correo electrónico real y operativa. La condición jаvascript consiste en:
valor = document.getElementById("campo").value;
if( !(/w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)/.test(valor)) ) {
return false;
}Validar una fecha
Las fechas suelen ser los campos de formulario más complicados de validar por la multitud de formas diferentes en las que se pueden introducir. El siguiente código asume que de alguna forma se ha obtenido el año, el mes y el día introducidos por el :
var ano = document.getElementById("ano").value;
var mes = document.getElementById("mes").value;
var dia = document.getElementById("dia").value;
valor = new Date(ano, mes, dia);
if( !isNaN(valor) ) {
return false;
}La validación consiste en intentar construir una fecha con los datos proporcionados por el . Si los datos del no son correctos, la fecha no se puede construir correctamente y por tanto la validación del formulario no será correcta.
Validar un número de Identificación Nacional
Se trata de comprobar que el número proporcionado por el se corresponde con un número válido de Documento Nacional de Identidad o DNI. Aunque para cada país o región los requisitos del documento de identidad de las personas pueden variar, a continuación se muestra un ejemplo genérico fácilmente adaptable. La validación no sólo debe comprobar que el número esté formado por ocho cifras y una letra, sino que también es necesario comprobar que la letra indicada es correcta para el número introducido:
valor = document.getElementById("campo").value;
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
if( !(/^d{8}[A-Z]$/.test(valor)) ) {
return false;
}
if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) {
return false;
}La segunda comprobación aplica el algoritmo de cálculo de la letra del DNI y la compara con la letra proporcionada por el . El algoritmo de cada documento de identificación es diferente, por lo que esta parte de la validación se debe adaptar convenientemente.
Validar un número de teléfono
Los números de teléfono pueden ser indicados de formas muy diferentes: con prefijo nacional, con prefijo internacional, agrupado por pares, separando los números con guiones, etc.
El siguiente script considera que un número de teléfono está formado por nueve dígitos consecutivos y sin espacios ni guiones entre las cifras:
valor = document.getElementById("campo").value;
if( !(/^d{9}$/.test(valor)) ) {
return false;
}| Número | Expresión regular | Formato |
|---|---|---|
900900900 |
/^d{9}$/ |
9 cifras seguidas |
900-900-900 |
/^d{3}-d{3}-d{3}$/ |
9 cifras agrupadas de 3 en 3 y separadas por guiones |
900 900900 |
/^d{3}sd{6}$/ |
9 cifras, las 3 primeras separadas por un espacio |
900 90 09 00 |
/^d{3}sd{2}sd{2}sd{2}$/ |
9 cifras, las 3 primeras separadas por un espacio, las siguientes agrupadas de 2 en 2 |
(900) 900900 |
/^(d{3})sd{6}$/ |
9 cifras, las 3 primeras encerradas por paréntesis y un espacio de separación respecto del resto |
+34 900900900 |
/^+d{2,3}sd{9}$/ |
Prefijo internacional (+ seguido de 2 o 3 cifras), espacio en blanco y 9 cifras consecutivas |
Validar que un checkbox ha sido seleccionado
Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, jаvascript permite comprobarlo de forma muy sencilla:
elemento = document.getElementById("campo");
if( !elemento.checked ) {
return false;
}formulario = document.getElementById("formulario");
for(var i=0; i<formulario.elements.length; i++) {
var elemento = formulario.elements[i];
if(elemento.type == "checkbox") {
if(!elemento.checked) {
return false;
}
}
}Validar que un radiobutton ha sido seleccionado
Aunque se trata de un caso similar al de los checkbox, la validación de los radiobutton presenta una diferencia importante: en general, la comprobación que se realiza es que el haya seleccionado algún radiobutton de los que forman un determinado grupo. Mediante jаvascript, es sencillo determinar si se ha seleccionado algún radiobutton de un grupo:
opciones = document.getElementsByName("opciones");
var seleccionado = false;
for(var i=0; i<opciones.length; i++) {
if(opciones[i].checked) {
seleccionado = true;
break;
}
}
if(!seleccionado) {
return false;
}
Comentarios