Como Desativar Mensagens de Erro de Validação

Visão geral

Gostaria de desativar as mensagens de erro de validação, mas manter a representação visual do erro?

Por defeito, quando um campo falha a validação num formulário, verá uma borda à volta do campo, mas também algum texto com um ícone a explicar a falha de validação. Pode facilmente alterar o texto destas verificações de validação nas definições do WPForms. Para mais informações sobre como alterar este texto, consulte este guia útil.

Com um pequeno trecho de CSS, pode facilmente ocultar o texto e o ícone que são exibidos quando um campo obrigatório não é preenchido, mas ainda assim permitir que o campo seja realçado a vermelho, proporcionando uma representação visual do erro. Neste tutorial, mostraremos o CSS necessário para desativar estas mensagens.

Adição do trecho de código

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

Se precisar de ajuda sobre como e onde adicionar trechos de CSS ao seu site, consulte 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 à volta do campo, fornecendo um guia visual para o motivo pelo qual o formulário não foi submetido, mas a mensagem de erro e o ícone já não estarão visíveis.

Se 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;
}

Basta alterar 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, consulte este tutorial.

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