Personalização da validação de formulários HTML

A validação de formulários sempre foi minha parte menos favorita do desenvolvimento da Web. O senhor precisa duplicar a validação nos lados do cliente e do servidor, lidar com muitos eventos e se preocupar com o estilo do elemento do formulário. Para ajudar na validação de formulários, a especificação HTML adicionou alguns novos atributos de formulário, como required e pattern para atuar como uma validação muito básica. No entanto, o senhor sabia que pode controlar a validação nativa de formulários usando JavaScript?

validity

Cada elemento do formulário (input, por exemplo) fornece um validity que representa uma propriedade ValidityState. ValidityState é mais ou menos assim:

// input.validity
{
  badInput: false,
  customError: true,
  patternMismatch: false,
  rangeOverflow: false,
  rangeUnderflow: false,
  stepMismatch: false,
  tooLong: false,
  tooShort: false,
  typeMismatch: false,
  valid: false,
  valueMissing: true
}

Cada propriedade no ValidityState pode corresponder aproximadamente a um problema de validação específico: valueMissing corresponderia ao required , tooLong e tooShort correspondência minLength e maxLength, etc.

Verificação da validade e definição de uma mensagem de validação personalizada

Cada campo de formulário fornece uma mensagem de erro padrão para cada tipo de erro, mas é provável que seja melhor definir uma mensagem mais personalizada para o seu aplicativo. O senhor pode usar o campo de formulário setCustomValidity do campo de formulário para criar sua própria mensagem:

// Check validity
input.checkValidity();

if(input.validity.valueMissing) {
  input.setCustomValidity('This is required, bro!  How did you forget?');
} else {
  // Clear any previous error
  input.setCustomValidity('');
}

Basta definir a mensagem por setCustomValidity não mostrar a mensagem, no entanto.

reportValidity

Para que o erro seja exibido ao usuário, use o elemento de formulário reportValidity do elemento de formulário:

// Show the error!
input.reportValidity();

A dica de ferramenta de erro será imediatamente exibida na tela. O exemplo a seguir exibe o erro a cada cinco segundos:

Veja a caneta Sem título por David Walsh (@darkwing) em CodePen.

Ter ganchos no sistema de validação de formulário nativo é muito valioso e eu gostaria que os desenvolvedores o utilizassem mais. Cada site tem seu próprio estilo de validação do lado do cliente, manipulação de eventos etc. Vamos usar o que nos foi fornecido!