[beta5] Forms do not allow the use of HTML client validation due to the novalidate attribute.

Created on 1 November 2023, about 1 year ago
Updated 4 November 2023, about 1 year ago

Problem/Motivation

Hi,
I see that the theme adds a novlidate to all the forms in the front theme. This makes it impossible to use html validation.

The hook in ui_suite_dsfr.theme :

ui_suite_dsfr_form_alter(&$form, &$form_state, $form_id)

disables client side validation on all forms of website:

$form['#attributes']['novalidate'] = 'novalidate';

I'm wondering about its presence on the theme, and in particular the following aspects :

Performance

  • Client-side validation, when enabled, can reduce server load by avoiding unnecessary submissions of incorrect data ( if no javascript).
  • Correctly parameterised in HTML5, it is possible to carry out relevant validations without having to use javascript (e.g. https://codepen.io/jester6/pen/ZEYjzGx).

Accessibility

  • - Client-side validation provides instant feedback to users, which is of particular benefit to those who rely on assistive technologies
  • - Enhanced accessibility helps provide an equitable experience for all users.

UX

  • Client-side validation allows users to quickly correct errors without submitting the form, providing a smoother, less frustrating experience.
  • Error messages after submission are avoided, improving the overall UX.

DSFR

Proposed resolution

I would recommend deleting the novalidate attribute.
However, this could have an impact on all sites using ui_suite_dsfr theme.

Have a nice day
Marc

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇷🇪Réunion Martygraphie Saint-Denis (Réunion)

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024