Creating a form target class for hints?

[carliecope]

I have a custom styled form and upon validation I'd like to add all of the returned span tags from the hint functions to a single 'error' div for the form, rather than having them display per input. Is this currently possible?

[Lesha-spr]

Hey @carliecope ,

I assume you also need some mapping to the validation Components. So for instance you'll show hints like: Input 'inputName' is required. Input 'otherInputName' should be alpha.

Am I correct?

[carliecope]

@Lesha-spr

Yes, mapping to the validation Components and their corresponding hints would be helpful

[pr1ntr]

👍

[ajorquera]

Hello, is there any progress on this. Do you need any help?

[DidiWillems]

Hey, I have a same kind of issue. I´dd like to have the name of the current prop in the hint of the error. But I only get the components. I want to make different hint messages for each input field, but the validating will remain the same. So I´dd rather not have a whole bunch of validation names. I like to do something like this:

Object.assign(Validation.rules, {
    required: {
        rule: (value) => {
          if (value) {
            return !!value.toString().trim();
          }
          return false;
        },
        hint: (value, components, current) => {
          const name = current.props.name;
          if (name == 'gender') {
            return <span
              className='form-error is-visible'>{gettext('Please choose a title')}</span>;
          } else {
            return <span
              className='form-error is-visible'>{gettext('Required')}</span>;
          }
        }
    },