Javascript ValidaciondeDatos
Javascript ValidaciondeDatos
es
Introducción a
JavaScript
// Sólo números
<input type="text" id="texto" onkeypress="return permite(event, 'num')" />
// Sólo letras
<input type="text" id="texto" onkeypress="return permite(event, 'car')" />
7.3. Validación
La principal utilidad de JavaScript en el manejo de los formularios es la validación de los
datos introducidos por los usuarios. Antes de enviar un formulario al servidor, se
www.librosweb.es 90
Introducción a JavaScript Capítulo 7. Formularios
recomienda validar mediante JavaScript los datos insertados por el usuario. De esta
forma, si el usuario 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 JavaScript mejora la satisfacción del
usuario con la aplicación (lo que técnicamente se conoce como "mejorar la experiencia
de usuario") y ayuda a reducir la carga de procesamiento en el servidor.
www.librosweb.es 91
Introducción a JavaScript Capítulo 7. Formularios
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()"
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.
Para que se de por completado un campo de texto obligatorio, se comprueba que el valor
introducido sea válido, que el número de caracteres introducido sea mayor que cero y
que no se hayan introducido sólo espacios en blanco.
www.librosweb.es 92
Introducción a JavaScript Capítulo 7. Formularios
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.
www.librosweb.es 93
Introducción a JavaScript Capítulo 7. Formularios
if( !isNaN(valor) ) {
return false;
}
La función Date(ano, mes, dia) es una función interna de JavaScript que permite
construir fechas a partir del año, el mes y el día de la fecha. Es muy importante tener en
cuenta que el número de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el mes de
Diciembre. Los días del mes siguen una numeración diferente, ya que el mínimo
permitido es 1 y el máximo 31.
www.librosweb.es 94
Introducción a JavaScript Capítulo 7. Formularios
La validación consiste en intentar construir una fecha con los datos proporcionados por
el usuario. Si los datos del usuario no son correctos, la fecha no se puede construir
correctamente y por tanto la validación del formulario no será correcta.
if( !(/^\d{8}[A-Z]$/.test(valor)) ) {
return false;
}
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;
}
www.librosweb.es 95
Introducción a JavaScript Capítulo 7. Formularios
Una vez más, la condición de JavaScript se basa en el uso de expresiones regulares, que
comprueban si el valor indicado es una sucesión de nueve números consecutivos. A
continuación se muestran otras expresiones regulares que se pueden utilizar para otros
formatos de número de teléfono:
Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados,
es más fácil utilizar un bucle:
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;
}
}
}
www.librosweb.es 96
Introducción a JavaScript Capítulo 7. Formularios
usuario haya seleccionado algún radiobutton de los que forman un determinado grupo.
Mediante JavaScript, es sencillo determinar si se ha seleccionado algún radiobutton de
un grupo:
opciones = document.getElementsByName("opciones");
if(!seleccionado) {
return false;
}
El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueba
elemento por elemento si ha sido seleccionado. Cuando se encuentra el primer
radiobutton seleccionado, se sale del bucle y se indica que al menos uno ha sido
seleccionado.
www.librosweb.es 97