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 que el 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 son objetos 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 elementos convencionales 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 se invoca 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 = "";