Comment désactiver les messages d'erreur de validation

Aperçu

Souhaitez-vous désactiver les messages d'erreur de validation tout en conservant la représentation visuelle de l'erreur ?

Par défaut, lorsqu'un champ échoue à la validation dans un formulaire, vous verrez une bordure autour du champ, mais aussi du texte avec une icône expliquant l'échec de la validation. Vous pouvez facilement modifier le texte de ces vérifications de validation dans les paramètres de WPForms. Pour plus d'informations sur la façon de modifier ce texte, veuillez consulter ce guide utile.

Avec un petit extrait CSS, vous pouvez facilement masquer le texte et l'icône qui s'affichent lorsqu'un champ obligatoire n'est pas rempli, tout en permettant au champ d'être mis en surbrillance en rouge, donnant une représentation visuelle de l'erreur. Dans ce tutoriel, nous vous montrerons le CSS nécessaire pour désactiver ces messages.

Ajout du snippet

Pour désactiver ce texte d'erreur, copiez et collez simplement cet extrait CSS sur votre site.

Si vous avez besoin d'aide sur comment et où ajouter des extraits CSS à votre site, veuillez consulter ce guide utile.

/* 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;
}

Ce CSS désactivera tous les messages d'erreur de validation dans WPForms pour tous les formulaires. Il y aura toujours une bordure rouge autour du champ fournissant un guide visuel expliquant pourquoi le formulaire n'a pas été soumis, mais le message d'erreur et l'icône ne seront plus visibles.

Si vous souhaitez cibler un seul formulaire, vous utiliseriez ce 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;
}

Changez simplement le -3602 dans le CSS pour correspondre à l'ID de votre propre formulaire. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, veuillez consulter ce tutoriel.

Et c'est tout ce dont vous avez besoin pour désactiver les messages d'erreur de validation ! Souhaitez-vous également modifier l'icône de champ obligatoire qui s'affiche dans vos formulaires ? Consultez notre tutoriel sur Comment modifier l'indicateur de champ obligatoire.