Validar un formulario con HTML5

En este tutorial aprenderás como validar un formulario con HTML5. Un aspecto muy importante que debemos tener en cuenta al momento de crear formularios es validarlos correctamente para que la información llegue a ser procesada de manera adecuada. Existen 3 niveles de validación. En este caso veremos el primer nivel de las validaciones, es decir, validación realizada desde código HTML5 únicamente por el lado del cliente. Si bien es cierto esta validación no es la más segura, sirve como un primer obstáculo a cualquier persona que quiera enviar un formulario.

Vamos a realizar 3 tipos de diferentes validaciones con HTML5. En primer lugar, vamos a validar que ciertos campos deban ser llenados de manera obligatoria. En segundo lugar, vamos a validar que el campo de URL se encuentra correctamente llenado y en tercer lugar vamos a validar que el email ingresado sea válido. Cabe destacar que este tipo de validaciones no tiene forma de comprobar si un e-mail o una URL realmente existen, sin embargo; nos garantiza que tendrán un formato válido.

En HTML5 tenemos la opción “required” para poder asegurarnos de que un campo sea llenado. A continuación, veremos esta opción aplicada a 2 campos de un formulario en particular, los cuales son el de “Nombre” e “Email”:

<div>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" title="Es obligatorio que ingreses tu nombre" required>
</div>

Gracias a dicho atributo, estos dos campos serán requeridos al momento de enviar el formulario. Se puede modificar el mensaje de error que aparecerá si estos campos están vacíos mediante el atributo “title” tal como se mostró también en la imagen anterior. El error obtenido si los campos están vacíos es el siguiente:

La segunda validación que haremos es ver que el campo “E-mail” contenga un e-mail válido. Dicha validación la lograremos cambiando el “type” del “input” a “email”, de tal manera que quede de la siguiente forma:

<div>
<label for="email">E-mail</label>
<input type="email" id="email" name="email" title="Es obligatorio que ingreses tu e-mail" required>
</div>

Además, el campo “Website” lo modificaremos también para que valida que la URL ingresada sea válida. Para lograr dicho objetivo, debemos agregar el atributo “type” del “input” para que contenga la palabra “url” tal como se muestra en la figura siguiente:

<div>
<label for="url">Website</label>
<input type="url" id="url" name="url" title="Debes introducir una URL valida.">
</div>

Ambos mensajes de errores también pueden ser modificados mediante el atributo “title”. Si todo está correcto, ahora veremos las validaciones pertinentes cuando intentemos realizar un envío del formulario.

Por último, aquí tenemos el código completo del formulario en caso sea necesario:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Tooltip - Forms</title>
</head>
<body>

<form>
	<fieldset>
		<div>
			<label for="firstname">Firstname</label>
			<input id="firstname" name="firstname" title="Es obligatorio que ingreses tu nombre" required>
		</div>
		<div>
			<label for="lastname">Lastname</label>
			<input id="lastname" name="lastname" title="Please provide also your lastname.">
		</div>
		<div>
			<label for="url">Website</label>
			<input type="url" id="url" name="url" title="Debes introducir una URL valida.">
		</div>
		<div>
			<label for="email">E-mail</label>
			<input type="email" id="email" name="email" title="Es obligatorio que ingreses tu e-mail" required>
		</div>
		<div>
			<input type="submit" value="Enviar">
	</fieldset>
</form>

</body>
</html>