Validación de campos en HTML5
https://engineerdesistemas.blogspot.com/2016/12/validacion-de-campos-en-html5.html
Antes de la llegada de HTML5 para realizar una validación de datos se requería necesariamente la intervención de JavaScript, con lo que se dispone ahora ya no es necesario, claro que tiene sus limitantes debido a que no es posible aplicarlo para todas las situaciones, sin embargo nos da luces de como HTML5 avanzó mucho en este tema en particular.
En este ejemplo vamos a presentar el código de validación del campo email, funciona con la ayuda de algunas lineas de codigo CSS por lo que su implementación no requiere esfuerzo alguno.
<!DOCTYPE html>
<html>
<head>
<title>Validacion de campos</title>
<style type="text/css">
[required] {
border-color: green;
box-shadow: 0px 0px 5px green;
}
:invalid {
border-color: red;
box-shadow: 0px 0px 5px red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Nombre
</td>
<td>
<input type="text" required>
</td>
</tr>
<tr>
<td>
Apellido
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" value="usuario@dominio.com"/>
</td>
</tr>
</table>
</body>
</html>
Y el resultado en pantalla se ve así, el borde de color rojo cuando se ingresa algún email que no tiene el formato requerido :
