Back to TILs

HTML input pattern

Date: 2020-07-18Last modified: 2023-01-10
htmlinputpattern

Table of contents

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