En el anterior posteo, Validar formularios con Jquery, vimos cómo validar formularios con la ayuda de Jquery. En esta ocasión veremos lo mismo pero con html5.
Antes de empezar aclaro que como ustedes saben, html5 es medianamente nuevo, por tanto si lo probás con algún navegador viejito no va a funcionar. Mientras estoy haciendo este ejemplo lo estoy probando con Google Chrome en una de sus versiones más recientes. Esto lo digo porque html5 no es estándar, y en versiones viejas de navegadores no va a funcionar.
¡Ok, empecemos! Para validar formularios en html5 no hay que cargar librerías, ni crear reglas de validación, ni nada, simplemente en esta última versión de este lenguaje existe una nueva propiedad que reciben los elementos de formulario llamada require.
<input type="text" required />
Con esto ya es suficiente.
Ahora, una de las novedades de html5 es que hay nuevos tipos de elementos. Por ejemplo un input para ingresar datos numéricos. En ese caso para validar que el campo esté completo y que además sean números:
<input type="number" required />
O también se podría validar un email:
<input type="email" required />
Como ven la propiedad type tiene nuevos valores. Existen otros también, como por ejemplo date para las fechas. Pero en esta ocasión no me ocuparé de explicarlos todos, seguramente lo haga en otro posteo.
El ejemplo quedaría así:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="formulario" action="" method="post">
<label for="nombre_y_apellido"> (*) Nombre y apellido </label>
<br />
<input type="text" name="nombre_y_apellido" id="nombre_y_apellido" title="Ingrese su nombre y apellido" required />
<br />
<label for="sueldo"> (*) Sueldo estimativo </label>
<br />
<input type="number" name="sueldo" id="sueldo" size="5" maxlength="5" title="Ingrese su sueldo estimativo (sólo números)" min="0" max="99999" required />
<br />
<label for="email"> (*) E-mail </label>
<br />
<input type="email" name="email" id="email" class="required email" title="Ingrese su dirección de correo electrónico" required />
<br />
<label for="telefono"> Teléfono </label>
<br />
<input type="text" name="telefono" id="telefono" />
<br />
<label for="cv"> Cv </label>
<br />
<textarea rows="5" cols="50" name="cv" id="cv" title="Ingrese su Cv" required></textarea>
<br />
<div> (*) Campos requeridos </div>
<input type="submit" id="enviar" value="Enviar" />
</form>
</body>
</html>
Entonces al presionarse el botón submit el formulario no se enviará si hay campos con la propiedad required que no son correctos.
Ahora bien, como expliqué en el anterior posteo, muchos formularios deben validare, pero no todos deben enviarse. Por ejemplo un formulario que hace peticiones al servidor vía ajax. El botón de type «submit» lo que hace al presionarse es enviar los datos a la página.
Esto puede resolverse de dos maneras, la primera es, si el problema es que el botón de type «submit» es el que envía los datos cambiarlo por uno de type «button«.
Esto:
<input type="submit" id="enviar" value="Enviar" />
Por esto:
<input type="button" id="enviar" value="Enviar" />
O bien, la que yo usaré para mostrar el ejemplo es agregar la etiqueta form el evento onsubmit con el valor «return false;»
Esto:
<form id="formulario" action="" method="post">
Por esto:
<form id="formulario" action="" method="post" onsubmit="return false;">
Ahora bien, ¿cómo saber si el formulario está validado o no? En htm5 existe un nuevo método para los form llamado .checkValidity() que devolverá true, si el formulario está validado.
El ejemplo para validar pero sin enviar el formulario quedaría así:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var formulario = document.getElementById('formulario');
var boton_enviar = document.getElementById('enviar');
boton_enviar.onclick = function(){
if(formulario.checkValidity()){
alert('El formulario es correcto!');
}
}
}
</script>
</head>
<body>
<form id="formulario" action="" method="post" onsubmit="return false;">
<label for="nombre_y_apellido"> (*) Nombre y apellido </label>
<br />
<input type="text" name="nombre_y_apellido" id="nombre_y_apellido" title="Ingrese su nombre y apellido" required />
<br />
<label for="sueldo"> (*) Sueldo estimativo </label>
<br />
<input type="number" name="sueldo" id="sueldo" size="5" maxlength="5" title="Ingrese su sueldo estimativo (sólo números)" min="0" max="99999" required />
<br />
<label for="email"> (*) E-mail </label>
<br />
<input type="email" name="email" id="email" class="required email" title="Ingrese su dirección de correo electrónico" required />
<br />
<label for="telefono"> Teléfono </label>
<br />
<input type="text" name="telefono" id="telefono" />
<br />
<label for="cv"> Cv </label>
<br />
<textarea rows="5" cols="50" name="cv" id="cv" title="Ingrese su Cv" required></textarea>
<br />
<div> (*) Campos requeridos </div>
<input type="submit" id="enviar" value="Enviar" />
</form>
</body>
</html>
Amigoo justo lo que buscaba, muchas gracias!!!
Gracias a vos por comentar, Esteban.
Saludos!
grax!
Precisamente lo que estaba buscando, muchas gracias!!1
Gracias a vos por comentar, Gustavo.
Saludos!
Muito legal, Hermano, muchas gracias, claro y sencilllo, pero muy potente.
Me salvaste horas de estudio. Deus te abencoe
Gracias a vos por comentar.
Saludos!