Tratando de validar un formulario de manera simple sin usar Javascript o Jquery, me encontré con un manual, muy bueno que que usa la validación del mismo navegador para realizar la comprobación antes de enviar tu formulario.
Todos los tipos de elemento que pueden recibir entrada del usuario (textarea, select, etc.) soportan el atributo required, pero cabe aclarar que el elemento textarea no soporta el atributo pattern.
Todos los campos de texto (<input> or <textarea>) pueden ser restringidos en tamaño usando el atributo maxlength. Un campo es inválido si su valor es mayor al valor del atributo maxlength. La mayoría de las ocasiones, sin embargo, los navegadores no permiten que el usuario escriba un valor más largo del indicado.
Para campos numéricos, los atributos min y max también proveen una restricción de validación. Si el valor del campo es menor que el del atributo min o mayor que el del atributo max, el campo será inválido.
Aquí un ejemplo completo:
Codigo HTML
<form> <fieldset> <legend>Title<abbr title="This field is mandatory">*</abbr></legend> <input id="r1" name="title" required="" type="radio" value="Sr" /><label for="r1">Sr. </label> <input id="r2" name="title" required="" type="radio" value="Sra" /><label for="r2">Sra.</label></fieldset> <label for="n1">¿Cuál es tu edad?</label> <!-- El atributo pattern puede actuar como fallback para navegadores que no implementen el tipo number pero sí soporten el atributo pattern. Nótese que los navegadores que soportan el atributo pattern lo harán fallar silenciosamente cuando se use con un campo numérico. Su uso aquí solo es como fallback --> <input id="n1" max="120" min="12" name="age" pattern="\d+" step="1" type="number" /> <label for="t1">¿Cuál es tu fruta favorita?<abbr title="Este campo es obligatorio">*</abbr></label> <input id="t1" list="l1" name="fruit" pattern="[Pp]l[áa]tano|[Cc]ereza|[Mm]anzana|[Ff]resa|[Ll]im[oó]n|[Nn]aranja" required="" type="text" /> <datalist id="l1"> <option>Plátano</option> <option>Cereza</option> <option>Manzana</option> <option>Fresa</option> <option>Limón</option> <option>Naranja</option></datalist> <label for="t2">¿Cuál es tu dirección de correo electrónico?</label> <input id="t2" name="email" type="email" /> <label for="t3">Déjanos un mensaje corto</label> <textarea id="t3" maxlength="140" name="msg" rows="5"></textarea> <button>Enviar</button> </form>
Estilo CSS:
body {
font: 1em sans-serif;
padding: 0;
margin : 0;
}
form {
max-width: 200px;
margin: 0;
padding: 0 5px;
}
p > label {
display: block;
}
input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
/* requerido para estilizar adecuadamente elementos
de formulario en navegadores basados en WebKit */
-webkit-appearance: none;
width : 100%;
border: 1px solid #333;
margin: 0;
font-family: inherit;
font-size: 90%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input:invalid {
box-shadow: 0 0 5px 1px red;
}
input:focus:invalid {
outline: none;
}
Ejemplo