Nuevos trucos html5 / css3 para la validación

Video: Curso HTML 5. Formularios II. Validación y nuevos atributos. Vídeo 22

HTML5 y CSS3 añaden algunos trucos más para simplificar la validación, y son absolutamente maravilloso. Aunque siempre se puede utilizar javascript y expresiones regulares para validar sus páginas, HTML5 promete una solución mucho más fácil. Cuando se utilizan los elementos de entrada de propósito especial, el navegador comprobará automáticamente el campo de formulario para asegurarse de que está en un formato adecuado.

Si la entrada no es válida, el formulario (en general) no presentó, y el especial :inválido CSS pseudo-clase se asocia con el campo no válido. Simplemente suministrar CSS a la página de manejo de la :inválido estado:

 : Inválido {background-color: rojo-}

Cuando este estado CSS está activo, cualquiera de los campos no válidos tendrán la :inválido peinado. Por ejemplo, si tiene una correo electrónico ámbito definido y el contenido de ese campo no es una dirección válida de correo electrónico, la inválido se aplicará el estilo. Tan pronto como la dirección está en el formato correcto, el inválido estilo va a ser eliminado.

El desarrollador no tiene que añadir ningún otro código para el formulario. Basta con añadir CSS para mostrar las entradas no válidas, y el navegador se encargará del resto. Ni siquiera es necesario especificar la expresión regular para las direcciones de correo electrónico o cualquier otro campo de entrada de la especialidad - la expresión regular apropiado para cada tipo de campo ya está incorporado.

Tenga en cuenta que si se requiere un campo (con la necesario atribuir), que serán considerados válidos hasta que contenga algún valor.

Es posible que el navegador va a rechazar la tramitación de una forma hasta que todos los campos son validados, pero este comportamiento no parece ser universal entre los navegadores compatibles con HTML5.

Si lo desea, puede desactivar la validación de cualquier campo mediante la adición de la novalidate atribuir a ese elemento.

Cómo agregar un patrón

los patrón atributo permite especificar una expresión regular se utiliza para validar el formulario. Si el contenido coincide con la expresión regular, el campo será considerada válida. los patrón atributo debe utilizarse sólo cuando las técnicas de validación estándar no son suficientes (es decir, que está utilizando un elemento de entrada ordinaria que no tiene un patrón automático), ya que puede ser difícil de depurar expresiones regulares.

Cuando se especifica un patrón, debe incluir también una título atributo. El título debe indicar cuál es el patrón. El navegador puede utilizar esto como un consejo para el usuario. También puede ser útil añadir información del patrón como texto del marcador.

Cómo marcar un campo según sea necesario

los necesario atributo permite especificar un campo en particular según se requiera. navegadores que soporten marcarán todos los campos requeridos (tal vez seleccionándolos en rojo) si no se rellenan. Algunos navegadores también enviarán una advertencia si el usuario intenta enviar un formulario con campos requeridos vacíos.

El especial :necesario pseudo-clase le permite aplicar un estilo CSS a todos los elementos requeridos en el formulario (dándoles un borde o un color de fondo, por ejemplo). Aquí está un ejemplo de un estilo CSS para marcar elementos requeridos con un borde rojo:

 : Necesaria {border: 1px sólido rojo-}

Si usted tiene un campo obligatorio y no tiene contenido, ese campo disparará la inválido estilo.

Video: Styling HTML5 Form Validation Messages with CSS3

Cómo añadir texto marcador de posición

los marcador de posición atributo le permite añadir un valor especial marcador de posición en los campos de texto. Este marcador de posición actúa como una etiqueta temporal que muestra el propósito del campo sin requerir una etiqueta etiqueta. Tan pronto como el usuario activa el campo, el texto del marcador desaparece.

No todos los navegadores soportan texto del marcador. Otros navegadores simplemente ignorar la marcador de posición atributo. Del mismo modo, si el campo ya se rellena, el marcador de posición no será visible. Por estas razones, todavía se prefiere añadir una etiqueta que los usuarios sepan qué debe escribir en cada área de texto. texto del marcador es especialmente útil cuando se utiliza para indicar la forma en la entrada debe ser formateado.