Javascript-validacion de formularios

Solo disponible en BuenasTareas
  • Páginas : 8 (1787 palabras )
  • Descarga(s) : 4
  • Publicado : 4 de noviembre de 2009
Leer documento completo
Vista previa del texto
Validar formularios en JavaScript
Los formularios representan una forma rápida y eficaz de enviar información desde el ordenador del usuario hasta el servidor web. Generalmente, constan de varios campos de texto, botones de selección y listas desplegables, que el usuario rellena convenientemente y transmite al servidor pulsando finalmente en un botón de envío. A menudo, muchos de los campos queel usuario debe completar obedecen a un formato determinado, por lo que conviene que el usuario los rellene correctamente para evitar errores al procesar en el servidor los datos recibidos. JavaScript constituye una manera muy conveniente de trasladar esta labor de validación de la información al ordenador del cliente, descargando así al servidor de esta tarea.
En JavaScript, los formularios sonobjetos form, que dependen a su vez del objeto document. Cuando se crea el formulario utilizando la etiqueta <FORM> de HTML, conviene darle un nombre para poder referenciarlo cómodamente más adelante desde funciones de JavaScript. Asimismo, todos los elementos del formulario, botones, cuadros de texto, listas, etc., deberían ser nombrados por la misma razón. JavaScript se añade a los elementosconvencionales del formulario en la forma de gestores de eventos.
En primer lugar, se crea el formulario de manera normal, usando las etiquetas HTML convencionales. En la página de ejemplo aparece el formulario cuyo código se lista a continuación:
<form method = "POST" name = "registro" onSubmit = "return validar(this)" action = "formularios.asp">
Nombre: <input type="text" name="nombre"size="20">
Edad: <input type="text" name="edad" size="2">
Dirección de correo: <input type="text" name="correo" size="20">
<input type="submit" value="Enviar datos" name="enviar">
</form>
que consta de tres campos de entrada y un botón para enviar los datos. Se ha añadido el evento onSubmit, que se produce cuando el usuario pulsa el botón Enviar datos, de manera que seinvoca a la función validar antes de transmitir nada. El argumento que toma es this, es decir, el propio formulario. A continuación se presenta el código de dicha función:
function validar(formulario) {
if (formulario.nombre.value.length < 4) {
alert("Escriba por lo menos 4 caracteres en el campo "Nombre".");
formulario.nombre.focus();
return (false);
}
var checkOK ="ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚ" + "abcdefghijklmnñopqrstuvwxyzáéíóú ";
var checkStr = formulario.nombre.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++) {
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length) {
allValid = false;
break;
}
}
if (!allValid) {
alert("Escriba sólo letras en el campo "Nombre".");formulario.nombre.focus();
return (false);
}
var checkOK = "0123456789";
var checkStr = formulario.edad.value;
var allValid = true;
var decPoints = 0;
var allNum = "";
Continúa en la página siguiente
for (i = 0; i < checkStr.length; i++) {
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length) {
allValid = false;
break;
}
allNum += ch;
}
if(!allValid) {
alert("Escriba sólo dígitos en el campo "Edad".");
formulario.edad.focus();
return (false);
}
var chkVal = allNum;
var prsVal = parseInt(allNum);
if (chkVal != "" && !(prsVal >= "18" && prsVal <= "30")) {
alert("Escriba un valor mayor o igual que 18 y menor o igual que 30 en el campo "Edad".");
formulario.edad.focus();
return (false);
}
if((formulario.correo.value.indexOf ('@', 0) == -1)||(formulario.correo.value.length < 5)) {
alert("Escriba una dirección de correo válida en el campo "Dirección de correo".");
return (false);
}
return (true);
}
Esta función realiza las siguientes comprobaciones:
1. La longitud del nombre es mayor de cuatro caracteres.
2. El nombre sólo contiene caracteres del alfabeto español, no contiene números ni caracteres no...
tracking img