Apenas letras
1<input
2 type="text"
3 required="required"
4 name="text"
5 pattern="[a-z\s]+$" />
Apenas números
1<input
2 type="text"
3 required="required"
4 name="numbers"
5 pattern="[0-9]+$" />
Data
1<input
2 type="date"
3 required="required"
4 maxlength="10"
5 name="date"
6 pattern="[0-9]{2}\/[0-9]{2}\/[0-9]{4}$"
7 min="2012-01-01"
8 max="2014-02-18" />
Hora
1<input
2 type="time"
3 required="required"
4 maxlength="8"
5 name="hour"
6 pattern="[0-9]{2}:[0-9]{2} [0-9]{2}$" />
Campos genéricos de texto
1<input
2 type="text"
3 required="required"
4 name="name" />
Telefone
1<input
2 type="tel"
3 required="required"
4 maxlength="15"
5 name="phone"
6 pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" />
1<input
2 type="email"
3 required="required"
4 class="input-text"
5 name="email"
6 pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
Moeda
1<input
2 type="tel"
3 required="required"
4 maxlength="15"
5 name="valor"
6 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
1<input
2 type="file"
3 name="file"
4 accept="image/*"
5 required="required" />
Código do país
1<input
2 type="text"
3 name="country_code"
4 pattern="[A-Za-z]{3}"
5 title="Three letter country code" />
Senha
1<input
2 type="password"
3 name="pwd"
4 pattern=".{8,}"
5 title="Eight or more characters" />
1<input
2 type="password"
3 name="pwd"
4 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
5 title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" />
Busca
An <input> element with type="search" that CANNOT contain the following characters: ' or "
1<input
2 type="search"
3 name="search"
4 pattern="[^'\x22]+"
5 title="Invalid input">
URL
1<input
2 type="url"
3 name="website"
4 pattern="https?://.+"
5 title="Include http://">
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
1input:required:invalid {}
2input:required:valid {}
Personalizar as mensagens de erro
Encontrei este artigo bem completo e interessante: Validando formulários like a boss com HTML5. Onde é mostrado o atributo: required x-moz-errormessage=”Ops. Não esqueça de preencher este campo.”, logicamente exclusivo do Firefox.
E para webkit, o css:
1::-webkit-validation-bubble {/*Insira aqui seu CSS.*/}
2::-webkit-validation-bubble-message {}
3::-webkit-validation-bubble-arrow {}
4::-webkit-validation-bubble-arrow-clipper {}
That’s all folks!
Em alguns inputs, mesmo com o type definido, eu forcei a validação no pattern, pois um pode ser implementado sem o outro pelos browsers, e existe um “bug” no type email, em que no Chrome ele aceita um email do tipo: email@a, sem obrigar que o cliente informe o domínio do site. (.com, .net…)
Comente caso use algum, ou tenha outro para sugerir!!