Back to TIL list

input pattern

Created at

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

Email

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

Código do país

<input  type="text"  name="country_code"  pattern="[A-Za-z]{3}"  title="Three letter country code" />

Senha

<input  type="password"  name="pwd"  pattern=".{8,}"  title="Eight or more characters" />
<input  type="password"  name="pwd"  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"  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 "

<input  type="search"  name="search"  pattern="[^'\x22]+"  title="Invalid input">

URL

<input  type="url"  name="website"  pattern="https?://.+"  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

input:required:invalid {}input: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:

::-webkit-validation-bubble {/*Insira aqui seu CSS.*/}::-webkit-validation-bubble-message {}::-webkit-validation-bubble-arrow {}::-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

No related pages found.