Desarrollo Web con Javascript

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 2

Módulo 2: Programando Javascript

Unidad 6: Formularios y validación

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 3

Presentación:
JavaScript, es un lenguaje de programación de páginas web de lado del cliente, esto
significa, que cuando estamos viendo una página que utiliza JavaScript, hemos descargado
el código a nuestro navegador y nuestro navegador lo está ejecutando de acuerdo con las
acciones realizadas en la página.

Actualmente es una pieza fundamental en el desarrollo de aplicaciones web y es usado

por las grandes compañías como Google, Yahoo, Microsoft, etc y se ha convertido en una
herramienta tan poderosa, que su conocimiento es uno de los puntos más valorados en las
búsquedas laborales de desarrolladores web.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 4

Objetivos:
Que los participantes:

 Crear y validar formularios con Javascript

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 5

Bloques temáticos:
 Eventos aplicados a formularios
 Validación del lado del cliente

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 6

Consignas para el aprendizaje colaborativo

En esta Unidad los participantes se encontrarán con diferentes tipos de actividades que, en
el marco de los fundamentos del MEC*, los referenciarán a tres comunidades de
aprendizaje, que pondremos en funcionamiento en esta instancia de formación, a los
efectos de aprovecharlas pedagógicamente:

● Los foros proactivos asociados a cada una de las unidades.

● La Web 2.0.
● Los contextos de desempeño de los participantes.

Es importante que todos los participantes realicen algunas de las actividades sugeridas y
compartan en los foros los resultados obtenidos.

Además, también se propondrán reflexiones, notas especiales y vinculaciones a bibliografía

y sitios web.

El carácter constructivista y colaborativo del MEC nos exige que todas las actividades
realizadas por los participantes sean compartidas en los foros.

* El MEC es el modelo de E-learning colaborativo de nuestro Centro.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 7

Tomen nota
Las actividades son opcionales y pueden realizarse en forma individual, pero siempre es
deseable que se las realice en equipo, con la finalidad de estimular y favorecer el trabajo
colaborativo y el aprendizaje entre pares. Tenga en cuenta que, si bien las actividades son
opcionales, su realización es de vital importancia para el logro de los objetivos de
aprendizaje de esta instancia de formación. Si su tiempo no le permite realizar todas las
actividades, por lo menos realice alguna, es fundamental que lo haga. Si cada uno de los
participantes realiza alguna, el foro, que es una instancia clave en este tipo de cursos,
tendrá una actividad muy enriquecedora.

Asimismo, también tengan en cuenta cuando trabajen en la Web, que en ella hay de todo,
cosas excelentes, muy buenas, buenas, regulares, malas y muy malas. Por eso, es
necesario aplicar filtros críticos para que las investigaciones y búsquedas se encaminen a
la excelencia. Si tienen dudas con alguno de los datos recolectados, no dejen de consultar
al profesor-tutor. También aprovechen en el foro proactivo las opiniones de sus compañeros
de curso y colegas.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 8

Formularios
La programación de aplicaciones que contienen formularios web siempre ha sido una de
las tareas fundamentales de JavaScript. De hecho, una de las principales razones por las
que se inventó el lenguaje de programación JavaScript fue la necesidad de validar los datos
de los formularios directamente en el navegador del usuario. De esta forma, se evitaba
recargar la página cuando el usuario cometía errores al rellenar los formularios.

No obstante, la aparición de las aplicaciones AJAX ha relevado al tratamiento de formularios

como la principal actividad de JavaScript. Ahora, el principal uso de JavaScript es el de las
comunicaciones asíncronas con los servidores y el de la manipulación dinámica de las
aplicaciones. De todas formas, el manejo de los formularios sigue siendo un requerimiento
imprescindible para cualquier programador de JavaScript.

Propiedades básicas
JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de
aplicaciones que manejan formularios. En primer lugar, cuando se carga una página web,
el navegador crea automáticamente un array llamado forms y que contiene la referencia a
todos los formularios de la página.

Para acceder al array forms, se utiliza el objeto document, por lo que [Link] es el
array que contiene todos los formularios de la página. Como se trata de un array, el acceso
a cada formulario se realiza con la misma sintaxis de los arrays. La siguiente instrucción
accede al primer formulario de la página:

[Link][0];
Además del array de formularios, el navegador crea automáticamente un array
llamado elements por cada uno de los formularios de la página. Cada
array elements contiene la referencia a todos los elementos (cuadros de texto, botones,
listas desplegables, etc.) de ese formulario. Utilizando la sintaxis de los arrays, la siguiente
instrucción obtiene el primer elemento del primer formulario de la página:

[Link][0].elements[0];
La sintaxis de los arrays no siempre es tan concisa. El siguiente ejemplo muestra cómo
obtener directamente el último elemento del primer formulario de la página:

[Link][0].elements[[Link][0].[Link]-1];

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 9

En un entorno tan cambiante como el diseño web, es muy difícil confiar en que el orden de
los formularios se mantenga estable en una página web. Por este motivo, siempre debería
evitarse el acceso a los formularios de una página mediante el array [Link].

Una forma de evitar los problemas del método anterior consiste en acceder a los formularios
de una página a través de su nombre (atributo name) o a través de su atributo id. El
objeto document permite acceder directamente a cualquier formulario mediante su
atributo name:

var formularioPrincipal = [Link];

var formularioSecundario = document.otro_formulario;
<form name="formulario" >
...
</form>

<form name="otro_formulario" >

...
</form>
Accediendo de esta forma a los formularios de la página, el script funciona correctamente
aunque se reordenen los formularios o se añadan nuevos formularios a la página. Los
elementos de los formularios también se pueden acceder directamente mediante su
atributo name:

var formularioPrincipal = [Link];

var primerElemento = [Link];

<form name="formulario">
<input type="text" name="elemento" />
</form>

Obviamente, también se puede acceder a los formularios y a sus elementos utilizando las
funciones DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual
función [Link]() para acceder de forma directa a un formulario y a uno
de sus elementos:

var formularioPrincipal = [Link]("formulario");

var primerElemento = [Link]("elemento");

<form name="formulario" id="formulario" >

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 10

<input type="text" name="elemento" id="elemento" />

</form>
Independientemente del método utilizado para obtener la referencia a un elemento de
formulario, cada elemento dispone de las siguientes propiedades útiles para el desarrollo
de las aplicaciones:

 type: indica el tipo de elemento que se trata. Para los elementos de

tipo <input> (text, button, checkbox, etc.) coincide con el valor de su atributo type.
Para las listas desplegables normales (elemento <select>) su valor es select-one,
lo que permite diferenciarlas de las listas que permiten seleccionar varios
elementos a la vez y cuyo tipo es select-multiple. Por último, en los elementos de
tipo <textarea>, el valor de type es textarea.
 form: es una referencia directa al formulario al que pertenece el elemento. Así,
para acceder al formulario de un elemento, se puede
utilizar [Link]("id_del_elemento").form
 name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su
valor, por lo que no se puede modificar.
 value: permite leer y modificar el valor del atributo value de XHTML. Para los
campos de texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito
el usuario. Para los botones obtiene el texto que se muestra en el botón. Para los
elementos checkbox y radiobutton no es muy útil, como se verá más adelante

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 11

Eventos aplicados a formularios

Los eventos más utilizados en el manejo de los formularios son los siguientes:

 onclick: evento que se produce cuando se pincha con el ratón sobre un elemento.
Normalmente se utiliza con cualquiera de los tipos de botones que permite definir
XHTML (<input type="button">, <input type="submit">, <input type="image">).
 onchange: evento que se produce cuando el usuario cambia el valor de un
elemento de texto (<input type="text"> o <textarea>). También se produce cuando
el usuario selecciona una opción en una lista desplegable (<select>). Sin embargo,
el evento sólo se produce si después de realizar el cambio, el usuario pasa al
siguiente campo del formulario, lo que técnicamente se conoce como que "el otro
campo de formulario ha perdido el foco".
 onfocus: evento que se produce cuando el usuario selecciona un elemento del
formulario.
 onblur: evento complementario de onfocus, ya que se produce cuando el usuario
ha deseleccionado un elemento por haber seleccionado otro elemento del
formulario. Técnicamente, se dice que el elemento anterior "ha perdido el foco"

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 12

Validación del lado del cliente

Al crear un formulario en HTML, debemos ser conscientes de un detalle ineludible: los
usuarios se equivocan al rellenar un formulario. Ya sea por equivocación del usuario,
ambigüedad del formulario, o error del creador del formulario, el caso es que debemos estar
preparados y anticiparnos a estos errores, para intentar que los datos lleguen
correctamente a su destino y evitar cualquier tipo de moderación o revisión posterior.

Para evitar estos casos, se suele recurrir a un tipo de proceso automático

llamado validación, en el cuál, establecemos unas pautas para que si el usuario
introduce alguna información incorrecta, deba modificarla o en caso contrario no podrá
continuar ni enviar el formulario correctamente.

Tradicionalmente, la validación de un formulario se ha hecho siempre en Javascript, sin

embargo, HTML5 introduce unos nuevos atributos para formularios que permiten realizar la
validación del formulario directamente en HTML5, sin necesidad de recurrir a Javascript.

Atributos básicos de validación

En nuestros campos de entrada de datos, se pueden utilizar ciertos atributos para realizar
validaciones sencillas. Algunos de estos atributos ya lo hemos visto en apartados
anteriores, sin embargo, vamos a comentarlos uno por uno:

minlength número Campos de texto Establece la longitud mínima del texto requerida.
maxlength número Campos de texto No permite escribir textos superiores
a número carácteres.
min número Campos Establece el número mínimo permitido.
numéricos
fecha Campos de fecha Establece la fecha mínima permitida.
hora Campos de hora Establece la hora mínima permitida.
max número Campos Establece el número máximo permitido.
numéricos
fecha Campos de fecha Establece la fecha máxima permitida.
hora Campos de hora Establece la hora máxima permitida.
step número Campos Establece el salto de números permitido. Por defecto, 1.
numéricos
fecha Campos de fecha Establece el salto de días permitido. Por defecto, 1.
hora Campos de hora Establece el salto de segundos permitido. Por defecto, 1.
required Campos en Campo obligatorio. Se debe rellenar para enviar
general formulario.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 13

disabled Campos en Campo desactivado. No se puede modificar. No se envía.

general
readonly Campos en Campo de sólo lectura. No se puede modificar. Se envía.
general

Con estos atributos, podemos crear validaciones básicas en nuestros campos de entrada
de datos, obligando al usuario a rellenar un campo obligatorio, forzando a indicar valores
entre un rango numérico o permitiendo sólo textos con un tamaño específico, entre otros.

<form name="formulario" method="post" action="#">

<!-- Nombre de usuario. Campo obligatorio, entre 5-40 carácteres -->
<label> Usuario: </label>
<input type="text" name="nombre" placeholder="Por ejemplo, Juan" minlength="5"
maxlength="40" required>
<!-- Contraseña. Campo obligatorio, mínimo 11 carácteres -->
<label>Password: </label>
<input type="password" name="pass" placeholder="Contraseña" minlength="11"
required>
</form>
También, podemos utilizar las pseudoclases CSS de validación :valid e :invalid y aplicar
estilos a los campos <input> y <textarea> teniendo en cuenta su validación. Aplicando el
siguiente código CSS se mostrará un fondo verde o rojo, dependiendo de si cumple o no la
validación, respectivamente:

input:valid, textarea:valid {
background:green;
}
input:invalid, textarea:invalid {
background:red;
}

El elemento <input>
El elemento <input> tiene nuevos valores para el atributo type.

<input type="email" />

<input type="url" />

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 14

<input type="date" />

<input type="time" />
<input type="datetime-local" />
<input type="month" />
<input type="week" />
<input type="number" />
<input type="range" />
<input type="tel" />
<input type="search" />
<input type="color" />

type="email"
Los elementos <input> de tipo "email" permiten al usuario introducir y editar una dirección
de correo electrónico, o, si el atributo multiple es especificado, una lista de direcciones de
correo electrónico.

<input type="email" id="correo" size="30" required>

type="url"
El elemento input, teniendo el valor "url" en su atributo type, representa un campo para un
solo URL absoluto. El control asociado a este campo es una caja de texto que permite a
los usuarios editar una sola línea de texto regular.

<input type="url" name="sitioweb" placeholder="¿Tienes un sitio web?">

type="date"
El elemento input, teniendo el valor "date" en su atributo type, representa un campo para la
entrada de una fecha. En los navegadores modernos los campos de fecha son
habitualmente representados por controles que permiten a los usuarios cambiar su valor de
manera gráfica (como, por ejemplo, un calendario), en lugar de tener que ingresarlo
directamente como una cadena.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 15

Previo al envío del formulario, los navegadores que soportan este mecanismo convierten la
información ingresada a una cadena que representa una fecha.

<input type="date" name="fecha" placeholder="Fecha de nacimiento" >

type="datetime-local"
El elemento input, teniendo el valor "datetime-local" en su atributo type, representa un
campo para una fecha y hora local sin información de zona horaria. Este tipo de campos es
particularmente útil para recolectar un punto en el tiempo, que es específco de un lugar.

Por ejemplo, podría ser utilizado en un formulario para establecer o cambiar la fecha y hora
de un simposio, celebrado en una ubicación específica, ya que los participantes deberían
encontrarse en el lugar para poder asistir a éste.

En navegadores modernos los campos de fecha y hora global son normalmente

representados por controles que permiten a los usarios cambiar su valor de manera gráfica
(como, por ejemplo, un calendario), en lugar de tener que ingresarlo directamente como
una cadena.

<input type="datetime-local" name="horareunion" placeholder="Hora de la reunión"

>

type="time"
El elemento input, teniendo el valor "time" en su atributo type, representa un campo para la
entrada de una hora. En los navegadores modernos, los campos de hora son habitualmente
representados por controles que permiten a los usuarios cambiar su valor de manera
gráfica, en lugar de tener que ingresarlo directamente como una cadena.

Previo al envío del formulario, los navegadores que soportan este mecanismo convierten la
información ingresada a una cadena que representa una hora.

<input type="time" name="hora" placeholder="Ingresá la hora" >

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 16

type="month"
El elemento input, teniendo el valor "month" en su atribtuo type, representa un campo para
la entrada de un mes. En los navegadores que soportan el mecanismo, estos campos
pueden estar representados por controles que permiten a los usuarios cambiar su valor de
manera gráfica (como, por ejemplo, un calendario), en lugar de tener que ingresarlo
directamente como una cadena.

<input type="month" name="mesnacimiento" placeholder="Mes de nacimiento">

type="week"
El elemento input, teniendo el valor "week" en su atributo type, representa un campo para
la entrada de una semana. En los navegadores que soportan el mecanismo, estos campos
pueden estar representados por controles que permiten a los usuarios cambiar su valor de
manera gráfica (como, por ejemplo, un calendario), en lugar de tener que ingresarlo
directamente como una cadena.

<input type="week" name="unasemana" placeholder="Semana">

type="number"
El elemento input, teniendo el valor "number" en su atributo type, representa un campo para
la entrada de un número. En los navegadores modernos los campos numéricos son
habitualmente representados por controles que permiten a los usuarios cambiar su valor de
manera gráfica, en lugar de tener que ingresarlo directamente como una cadena.

<input type="number" name="edad" placeholder="Edad">

type="range"
El elemento input, teniendo el valor "range" en su atributo type, representa una campo para
la entrada de un número dentro de un rango, con la salvedad de que la elección de un valor
exacto no es importante. En los navegadores que soportan el mecanismo los campos de
rango son habitualmente representados por algo similar a un deslizador, que se mueve

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 17

entre los márgenes superior e inferior. Este control es una variante de la entrada
numérica que puede desempeñarse mejor en situaciones específicas.

<input type="range" name="volumen">

type="tel"
El elemento input, teniendo el valor "tel" en su atributo type, representa un campo para un
número telefónico. El control asociado a este campo es una caja de texto que permite a los
usuarios editar una sola línea de texto regular, sin requerimientos partiuclares sobre el
formato. Esta conducta ha sido adoptada debido a la gran variedad de número telefónicos
válidos, que hace que las restricciones de propósitos generales sean inapropiadas.

Los autores pueden definir un conjunto particular de restricciones con el atributo pattern.

<input type="tel" name="numerocontactado" placeholder="Teléfono">

type="search"
El elemento input, teniendo el valor "search" en su atributo type, representa un campo de
texto de una sola línea para propósitos de búsqueda. El control asociado a este campo es
una caja de texto que permite a los usuarios editar una sola línea de texto regular. Los
controles de búsqueda son útiles para recopilar líneas cortas de texto que los agentes
procesadores o programas del lado cliente usarán como parámetros para conducir
operaciones de búsqueda.

Un campo de texto regular y un campo de búsqueda son muy similares. La diferencia entre
ellos es principalemente estilística: los navegadores pueden representar sus controles de
manera diferente, de acuerdo a su propósito.

<input type="search" name="busquedamusica" placeholder="Canción, autor,

álbum...">

type="color"
Los elementos <input> del tipo «color» proporcionan un elemento de interfaz que permite
a los usuarios especificar un color, mediante una interfaz visual de selección o a través de

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 18

un cuadro de texto donde ingresar un valor hexadecimal en el formato «#rrggbb».Solo se

permiten colores simples (sin canal alfa). Los valores son compatibles con CSS.

La presentación del elemento puede variar considerablamente entre navegadores y

plataformas: podría ser un campo de entrada sencillo que valida automáticamente que la
entrada esté en el formato adecuado, o podría lanzar un selector de colores estándar de la
plataforma, o incluso podría abrir una ventana de colores personalizada.

<form action="[Link]">
<strong>Selecciona tu color preferido:</strong><br>
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form><br>

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 19

Patrones de validación HTML5

No obstante, aunque los atributos de validación básicos son muy interesantes y pueden
facilitarnos la tarea de validación, en muchos casos son insuficientes. Para ello tenemos
los patrones de validación HTML5, mucho más potentes y flexibles, que nos permitirán ser
mucho más específicos utilizando expresiones regulares para validar datos.

Una expresión regular es una cadena de texto que representa un posible patrón de
coincidencias, que aplicaremos mediante el atributo pattern en los campos que queramos
validar.

Para ello hay que conocer algunas características básicas de las expresiones regulares:

Expresión Carácter
Denominación Descripción
regular especial

Cualquier caracter (o texto de

. Punto Comodín
tamaño 1)

A|B Pipe Opciones lógicas Opciones alternativas (o A o B)

Agrupaciones alternativas
C(A|B) Paréntesis Agrupaciones
(o CA o CB)

Rangos de
[0-9] Corchetes Un dígito (del 0 al 9)
carácteres

Una letra mayúscula de la A a

[A-Z]
la Z

Rango de Una letra que no sea mayúscula

[^A-Z] ^ en corchetes
exclusión de la A a la Z

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 20

Expresión Carácter
Denominación Descripción
regular especial

Un dígito repetido 0 ó más veces

[0-9]* Asterisco Cierre o clausura
(vacío incluido)

[0-9]+ Signo más Cierre positivo Un dígito repetido 1 ó más veces

Coincidencia Cifra de 3 dígitos (dígito

[0-9]{3} Llaves
exacta repetido 3 veces)

Coincidencia Cifra de 2 a 4 dígitos (rep.

[0-9]{2,4}
(rango) de 2 a 4 veces)

El caracter b puede aparecer o

b? Interrogación Carácter opcional
puede que no

El caracter literalmente (no como

\. Barra invertida Escape
comodín)

Ejemplos de patrones HTML5

Para clarificar estos conceptos y entenderlos mejor, vamos a mostrar algunos ejemplos de
campos con validaciones HTML5 en casos reales, y así afianzar conceptos sobre
expresiones regulares y su aplicación en los atributos pattern:

 Tipo de campo: Nombre de usuario

 Campo obligatorio: required.
 Entre 5-40 carácteres: minlength="5" maxlength="40"
 Sólo se permiten letras (mayúsculas y minúsculas) y números: pattern="[A-Za-
z0-9]+"

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 21

<form name="formulario" method="post" action="#">

<!-- Nombre de usuario. Campo obligatorio, entre 5-40 caracteres. Sólo se permiten letras y
números -->

<input type="text" name="nombre" placeholder="Su nombre de usuario"

minlength="5" maxlength="40" required pattern="[A-Za-z0-9]+">

</form>

Podemos ver que de no incluir los atributos minlength y maxlength el usuario no tendría
limitación en cuanto al tamaño. Esto también puede incorporarse en la propia expresión
regular, y prescindir de dichos atributos:

<form name="formulario" method="post" action="[Link]

<!-- Nombre de usuario. Campo obligatorio, entre 5-40 caracteres. Sólo se
permiten letras y números -->
<input type="text" name="nombre" placeholder="Su nombre de usuario" required
pattern="[A-Za-z0-9]{5,40}" title="Letras y números. Tamaño mínimo: 5. Tamaño
máximo: 40">
</form>

Sin embargo, en este caso, no se limitará al usuario a la hora de escribir, como

hace maxlength, sino que permitirá al usuario escribir la información que desee y en caso
de no pasar la validación, mostrará un mensaje de advertencia y no lo dejará continuar
hasta que termine. Podemos ampliar el mensaje de advertencia incluyendo el texto en el
atributo title.

En el siguiente caso, se pide al usuario que indique el modelo de coche que posee, en un
posible formulario de servicio técnico. Los modelos posibles son A1, A3, A4 y A15. En lugar
de mostrar una lista de selección, podemos mostrar un campo de texto y colocar una
validación como la siguiente:

 Tipo de campo: Modelo de coche

 Campo obligatorio: required.
 Sólo se permiten las opciones: A1, A3, A4 y A15
<form name="formulario" method="post" action="[Link]

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 22

<!-- Modelo de coche. Campo obligatorio, opciones posibles: A1, A3, A4 y A15
Sólo se permiten letras y números -->
<input type="text" name="coche" placeholder="Su modelo de coche"
required pattern="A|a(1|3|4|15)"
title="Modelos posibles: A1, A3, A4 y A15">
</form>

Permite tanto el formato a1 como el formato A1.

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning
 p. 23

Lo que vimos:
En esta unidad trabajamos con Formularios y validación

Lo que viene:
Trabajaremos con JQuery

Centro de e-Learning SCEU UTN - BA.

Medrano 951 2do piso (1179) // Tel. +54 11 4867 7589 / Fax +54 11 4032 0148
[Link]/e-learning