Come disabilitare i messaggi di errore di validazione

Panoramica

Vuoi disabilitare i messaggi di errore di validazione ma mantenere comunque la rappresentazione visiva dell'errore?

Per impostazione predefinita, quando un campo non supera la validazione in un modulo, vedrai un bordo attorno al campo ma anche del testo con un'icona che spiega il fallimento della validazione. Puoi facilmente modificare il testo di questi controlli di validazione nelle impostazioni di WPForms. Per maggiori informazioni su come modificare questo testo, consulta questa guida utile.

Con un piccolo snippet CSS, puoi facilmente nascondere il testo e l'icona che vengono visualizzati quando un campo obbligatorio non viene completato, ma consentire comunque al campo di essere evidenziato in rosso, fornendo una rappresentazione visiva dell'errore. In questo tutorial, ti mostreremo il CSS necessario per disabilitare questi messaggi.

Aggiunta dello snippet

Per disabilitare questo testo di errore, copia e incolla semplicemente questo snippet CSS sul tuo sito.

Se hai bisogno di aiuto su come e dove aggiungere snippet CSS al tuo sito, consulta questa guida 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;
}

Questo CSS disabiliterà tutti i messaggi di errore di validazione all'interno di WPForms per tutti i moduli. Ci sarà ancora un bordo rosso attorno al campo che fornisce una guida visiva sul motivo per cui il modulo non è stato inviato, ma il messaggio di errore e l'icona non saranno più visibili.

Se volessi mirare solo a un modulo, useresti questo 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;
}

Cambia semplicemente il -3602 nel CSS per corrispondere al tuo ID modulo. Se hai bisogno di aiuto per trovare il tuo ID modulo, consulta questo tutorial.

E questo è tutto ciò che ti serve per disabilitare i messaggi di errore di validazione! Vuoi anche cambiare l'icona del campo obbligatorio che viene visualizzata nei tuoi moduli? Dai un'occhiata al nostro tutorial su Come cambiare l'indicatore del campo obbligatorio.