Adjust the form validation to reflect Bootstrap 5 approach

This is because the asterisk in the core themes is displayed via CSS.

The attached patch fixes the problem for sub-themes by creating the necessary CSS lines in the kit, using the red indicated in the SCSS variables.

This works when creating a new sub-theme, for an already existing sub-theme you have to copy the changes.

It would be nice to have this available as an option OOTB. So suggest to make this optional by separating it to its own scss, so it could be enabled as needed. Perhaps

• /form/_form_required_asterisk.scss
• which could be expanded to, e.g. /form/_form_required_text.scss, showing "required" text
• /form/_form_optional_text.scss, showing "optional" text
• /form/_form_required_OTHER_VISUAL_GUIDES.scss, see references linked or BS validation custom styles
• where none are enabled by default, following BS>4

Primary argument is this is no longer provided since BS4. There are also other better UX, for references:
https://ux.stackexchange.com/questions/840/whats-the-best-way-to-highlig...
https://ux.stackexchange.com/questions/90685/using-asterisk-vs-required

There's a good article on this on ADG:
https://www.accessibility-developer-guide.com/examples/forms/required/

and some consideration on bootstrap docs as well:
https://getbootstrap.com/docs/5.0/forms/validation/

In addition to indicating requiered fields I'd also like to mark fields with errors.
We could add something like

.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 2px solid $red;
}

to components/form/_form.scss.
Styles are copied from core/themes/bartik/css/classy/components/form.css with using the red indicated in the SCSS variables.

@gngn, even though that sounds good but we should consider Bootstrap and not the things that Drupal core does

@doxigo

we should consider Bootstrap and not the things that Drupal core does

According to the link you posted in #4 (https://getbootstrap.com/docs/5.0/forms/validation/) that means we should use
.is-invalid and .is-valid instead of .error?
How do we get those classes in the validation process?

@gngn I'd say yes, we should do what bootstrap is doing shown below:

I'll adjust this in the future, going to change the title to reflect the conclusion

@doxigo that looks good - but I do not see the required classes .is-invalid (and .is-valid) in my validated form.
There is only core's .error.
What do I need to do to get the bootstrap classes?
Did I miss something while creating the sub theme?

Validation reflects Bootstrap 5 approach with a little extra work. My fix was as follows:

1. add class .needs-validation to form ($form['#attributes']['class'][] = 'needs-validation';);
2. in validateFrom(), if $form_state->getErrors() is not empty, add .was-validated class to form. (if (!empty($form_state->getErrors()) { $form['#attributes']['class'][] = 'was-validated'; })

At this point, everything looks like this https://getbootstrap.com/docs/5.0/forms/validation/#custom-styles

Additionally, use type email and tel for e-mail and phone fields. For type tel, you could also use pattern attribute to avoid a valid feedback when typing "asdf" instead of a phone number.

This is fixed for now but we probably have to consider clientside validation as well in the future