Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problemi validazione form senza JustValidate #1096

Open
AlessandroVecchi opened this issue Mar 27, 2024 · 3 comments
Open

Problemi validazione form senza JustValidate #1096

AlessandroVecchi opened this issue Mar 27, 2024 · 3 comments
Labels
a11y Issue e PR riguardanti accessibilità e dintorni enhancement

Comments

@AlessandroVecchi
Copy link

AlessandroVecchi commented Mar 27, 2024

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
Screenshot 2024-03-27 153946

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
Screenshot 2024-03-27 154343

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
Copy link
Contributor

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:

image

Non sarà perfetto me è meglio di niente

@AlessandroVecchi
Copy link
Author

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.

@astagi astagi added a11y Issue e PR riguardanti accessibilità e dintorni enhancement labels May 8, 2024
@Virtute90
Copy link
Contributor

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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Issue e PR riguardanti accessibilità e dintorni enhancement
Projects
Status: 📋 Backlog
Development

No branches or pull requests

3 participants