Validando formulários apenas com HTML5
Validar formulários é chato, tedioso e trabalhoso. Felizmente alguém olhou isso e resolveu incluir dentro da especificação do html, alguns atributos e valores novos muito interessantes.
Se usarmos corretamente, e estudarmos Expressões Regulares, é possível fazer uma validação simples sem escrever nenhuma linha de javascript. Vou deixar abaixo alguns snippets da tag input, utilizando o type correto (veja aqui todos os types novos da html5) e um uso do atributo pattern para os qual eu escrevi algunms ERs.
Apenas letras
<input type="text" required="required" name="text" pattern="[a-z\s]+$" />
Apenas números
<input type="text" required="required" name="numbers" pattern="[0-9]+$" />
Data
<input type="date" required="required" maxlength="10" name="date" pattern="[0-9]{2}\/[0-9]{2}\/[0-9]{4}$" min="2012-01-01" max="2014-02-18" />
Hora
<input type="time" required="required" maxlength="8" name="hour" pattern="[0-9]{2}:[0-9]{2} [0-9]{2}$" />
Campos genéricos de texto
<input type="text" required="required" name="name" />
Telefone
<input type="tel" required="required" maxlength="15" name="phone" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" />
<input type="email" required="required" class="input-text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
Moeda
<input type="tel" required="required" maxlength="15" name="valor" pattern="([0-9]{1,3}\.)?[0-9]{1,3},[0-9]{2}$" />
Utilizei o type=”tel”, pq em celulares renderiza melhor o teclado.
Input file
<input type="file" name="file" accept="image/*" required="required" />
Cores
<input id="color" name="color" type="color">
Volume
<input id="skill" type="range" min="1" max="100" value="0">
placeholder
Lembre-se de usar o placeholder nos seus campos em que você precise “dar alguma dica” para o usuário de como ele deve preenchê-lo
Estilizar os inputs
Faça testes utilizando as pseudo classes
input:required:invalid {} input:required:valid {}
http://prowebdesigner.com.br/blog/validando-formularios-apenas-com-html5/Validando formulários apenas com HTML5http://prowebdesigner.com.br/blog/wp-content/uploads/2015/06/html5-browswers1.jpghttp://prowebdesigner.com.br/blog/wp-content/uploads/2015/06/html5-browswers1-300x236.jpgWeb designerhtml 5 dicas,tutorial html 5,validação com html 5,validar cpf html 5,validar formulario
ótimo artigo, eu tinha muitas dificuldades em validar utilizando programação ou até mesmo javascript, HTML 5 veio pra salvar muita gente rsrss