clase 2017-05-16

[Fecha de publicación: 2017-05-16]

continuación proyecto
Se termino la validación de la página, en la que se utilizo html5. y se hizo de tal manera que en el campo de placa solo validara números y letras y una cantidad de 6 dígitos.

Ademas se introdujo el template.

El atributo pattern

Este atributo es sencillamente espectacular. Nos permite definir patrones de validación client-side personalizados sin prácticamente límite. El valor de este atributo ha de ser un formato de datos con notación de expresión regular javascript. Las expresiones regulares, conocidas como regex (del inglés regular expression), son incluidas en prácticamente todos los lenguajes de programación y permiten validar una cadena de texto frente a palabras, caracteres y patrones de una forma muy flexible a la vez que concisa.

Al poner un regex como valor del atributo pattern en un <input> decimos al navegador cuál es el valor aceptable para este campo del formulario. Familiarizarse con las expresiones regulares puede llevar algún tiempo y práctica, puedes empezar con la documentación para regex en javascript ofrecida por mozilla.

Por ejemplo, en España un número de teléfono fijo comienza por 9 o por 8 y un número móvil comienza por 6 o por 7 y en ambos casos le sigue un número de 8 dígitos. Un regex para aceptar números de teléfono de España podría ser:

<label for="tel">Teléfono (9 dígitos comenzando por 9, 8, 7 o 6)</label>
<input type="text" pattern="^[9|8|7|6]\d{8}$">

Este regex dice: aceptar sólo un número que comiencen por 9, 8, 6 o 7 seguido de 8 dígitos. En caso de introducir un número incorrecto saldría el siguiente aviso:

Validación teléfono español con HTML5 y el atributo pattern

Para utilizar el atributo pattern es recomendable utilizar el type="text" y no un type de los predefinidos en HTML5 que ya cuentan con patrones de validación en el propio navegador. Mezclar ambos puede llevar a resultados inesperados.

Personalizar avisos con el atributo title

En los ejemplos anteriores los avisos mostrados eran elegidos por el navegador. A través del atributo title podemos personalizar estos avisos. Por ejemplo:

<input type="text" name="twitter_username"
       pattern="^@?(\w){1,15}$"
       title="Este no parece un usuario de twitter válido">

Con el pattern anterior se aceptaría una cadena de texto de 15 letras que no contenga caracteres especiales (ñ, vocales acentuadas, etc). La cadena puede comenzar por @ o no. Con esta regla se aceptarían sólo nombres de usuario de twitter válidos y se lanzaría el siguiente aviso personalizado si se introduce uno no válido:

Validación usuario twitter con HTML5 y el atributo pattern con aviso personalizado

El atributo required

Tal y como su nombre indica, este atributo se utiliza para decir al navegador los campos del formulario que son requeridos de forma obligatoria, es decir, que no pueden quedar vacíos. Basta con poner required o required="required". Por ejemplo:

<input type="text" name="twitter_username"
       pattern="^@?(\w){1,15}$"
       title="Este no parece un usuario de twitter válido"
       required>

Si el <input> anterior se deja vacío se mostrará el siguiente aviso:

Aviso de campo obligatorio con atributo required en HTML5

Recuerda que:

• La validación de formularios con HTML5 ahorrará bastante trabajo de desarrollo al no tener que validar con javascript
• El soporte entre distintos navegadores está bastante extendido, salvo algunos tipos que requieren la especificación de expresiones regulares para su validación
• A través del atributo pattern las posibilidades son infinitas y podemos validar cualquier formato de datos que deseemos
• La seguridad de la validación con HTML5 es igual que la seguridad de la validación con javascript: ninguna. Ambas son validaciones client-side y nunca deben sustituir la validación server-side

tomado de : https://cybmeta.com/validacion-de-formularios-con-html5