Publicado em: 18/Jul/2020
Atualizado em: 19/Jul/2020
#html

input pattern

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}$" />

Email

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!!

Referências

comments powered by Disqus