Como Desativar Mensagens de Erro de Validação

Visão geral

Você gostaria de desativar as mensagens de erro de validação, mas ainda manter a representação visual do erro?

Por padrão, quando um campo falha na validação em um formulário, você verá uma borda ao redor do campo, mas também um texto com um ícone explicando a falha na validação. Você pode facilmente alterar o texto dessas verificações de validação nas configurações do WPForms. Para mais informações sobre como alterar este texto, por favor, revise este guia útil.

Com um pequeno trecho de CSS, você pode facilmente ocultar o texto e o ícone que são exibidos quando um campo obrigatório não é preenchido, mas ainda permitir que o campo seja destacado em vermelho, fornecendo uma representação visual do erro. Neste tutorial, mostraremos o CSS necessário para desativar essas mensagens.

Adicionando o snippet

Para desativar este texto de erro, basta copiar e colar este trecho de CSS em seu site.

Se você precisar de ajuda sobre como e onde adicionar trechos de CSS ao seu site, por favor, revise este guia útil.

/* Disable form validation error messages */
/* @link https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ */
.wpforms-field-required ~ em, input.wpforms-error ~ em {
  display: none !important;
}
.wpforms-field-required ~ em, input.wpforms-error ~ em {
  display: none !important;
}

Este CSS desativará todas as mensagens de erro de validação dentro do WPForms para todos os formulários. Ainda haverá uma borda vermelha ao redor do campo, fornecendo um guia visual do porquê o formulário não foi enviado, mas a mensagem de erro e o ícone não serão mais visíveis.

Se você quisesse direcionar apenas um formulário, usaria este CSS.

/* Disable form validation error messages */
/* @link https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ */
.wpforms-field-required ~ em, input.wpforms-error ~ em {
  display: none !important;
}
form#wpforms-form-3602 .wpforms-field-required ~ em, form#wpforms-form-3602 input.wpforms-error ~ em {
    display: none;
}

Simplesmente altere o -3602 no CSS para corresponder ao ID do seu próprio formulário. Se precisar de ajuda para encontrar o ID do seu formulário, por favor, veja este tutorial.

E é tudo o que você precisa para desativar as mensagens de erro de validação! Você gostaria também de alterar o ícone de campo obrigatório que é exibido em seus formulários? Confira nosso tutorial sobre Como Alterar o Indicador de Campo Obrigatório.