Problemi validazione form senza JustValidate

[AlessandroVecchi]

Versione di Bootstrap Italia

2.7.x/2.8.x

Comportamento atteso

I vari browser hanno un comportamento standard per la validazione dei form. Solitamente viene spostato il focus sul campo e compare una popup con l'indicazione dell'errore.

Esempio di Chrome su sito costruito con Boostrap 4.6

Comportamento attuale

In molti casi, anche se non sono ancora riuscito a capire quale sia la discriminante, questo non avviene con le form costruite con BI. Viene spostato il focus ma non compare alcun messaggio e quindi non sempre è immediato capire dove e quale sia l'errore.

Esempio su Chorme su sito costruito cin BI 2.7.x

Il problema è ancora più grave nel caso di checkbox o select dove non compare nemmeno il cursore ad aiutare l'indivisuazione dell'errore.

Possibili soluzioni

Consentire il meccanismo standard di validazione del browser senza obbligare alal configurazione di JustValidate

Contesto

Chrome/Firefox su Windows 11

[Virtute90]

Ti consiglio di controllare le classi in questo esempio per la validazione:

https://italia.github.io/bootstrap-italia/docs/esempi/form/

Per i campi input e le select ci deve essere .form-control

Invece per i checkbox anche io ho fatto fatica inizialmente ma alla fine ho verificato che aggiungendo .form-check-input all'input e .form-check-label alla label il risultato è questo:

Non sarà perfetto me è meglio di niente

[AlessandroVecchi]

Ciao @Virtute90 Ti ringrazio per la risposta. L'esempio che hai linkato usa JustValidate e pertanto non mi è d'aiuto per risolvere il problema. Inoltre quella form ha il grave errore che, dopo la submit, non riporti il focus sul primo dei campi da completare.

Il merito alla tua soluzione: secondo le linee guida delle WCAG un'informazione non può essere associata solo ad un colore, quindi non è sufficiente stampare in rosso la label del checkbox.

[Virtute90]

Ciao @Virtute90 Ti ringrazio per la risposta. L'esempio che hai linkato usa JustValidate e pertanto non mi è d'aiuto per risolvere il problema. Inoltre quella form ha il grave errore che, dopo la submit, non riporti il focus sul primo dei campi da completare.

Il merito alla tua soluzione: secondo le linee guida delle WCAG un'informazione non può essere associata solo ad un colore, quindi non è sufficiente stampare in rosso la label del checkbox.

Hai un codice di esempio? Così quando ho un attimo faccio dei test...