Incorrect behaviour of `showErrors`

[alexey-anufriev]

Describe the bug

When I use showErrors for custom error messages, then fields where showErrors was applied are being marked as invalid but not with a provided message, but with a generic preconfigured rule.

For example, I put a certain text into required field, then inside onSuccess I check what comes from backend and use showErrors to mark field that are still invalid. But once I start editing other fields (not the ones marked using showErrors), even with valid values, the ones marked with showErrors starting to show just generic error from preconfigured validator.

It is not easy to explain the case, might be easier to go through the steps below.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://codepen.io/Alexey-Anufriev/pen/ogvwydo
2. Fill both input fields
3. Press 'save' button
4. See 'custom err'
5. Put the cursor into the second input field
6. Type any character
7. See 'required in' error

Expected behavior

Since the field was not touched after the validation I would expect custom validation to stay until the exact field is modified.

Additional context

Unfortunately, I cannot use custom validators for each field separately that will go and check each value on the backend.

[viroff]

Describe the bug

When I use showErrors for custom error messages, then fields where showErrors was applied are being marked as invalid but not with a provided message, but with a generic preconfigured rule.

For example, I put a certain text into required field, then inside onSuccess I check what comes from backend and use showErrors to mark field that are still invalid. But once I start editing other fields (not the ones marked using showErrors), even with valid values, the ones marked with showErrors starting to show just generic error from preconfigured validator.

It is not easy to explain the case, might be easier to go through the steps below.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://codepen.io/Alexey-Anufriev/pen/ogvwydo
2. Fill both input fields
3. Press 'save' button
4. See 'custom err'
5. Put the cursor into the second input field
6. Type any character
7. See 'required in' error

Expected behavior

Since the field was not touched after the validation I would expect custom validation to stay until the exact field is modified.

Additional context

Unfortunately, I cannot use custom validators for each field separately that will go and check each value on the backend.

Got the same problem today. I use validateBeforeSubmitting: true just like you, and at first I thought that was the problem, but after experimenting, I realized that it wasn't.

[viroff]

in my opinion, the problem may be hidden in the validateField method, which does not take into account the current state of the field. I suggest considering the following behavior: in the setErrors method, add a property to the field in the form of a custom error and store it. Add a condition to the validateField method: if the field has a custom error, no re—validation is performed. Then the error message set by the user will not be erased by native messages.

validateField(key: string, afterInputChanged = false): Promise<any> {
    const field = this.fields[key];

-->    if(!!field.customError && field.customError !=='') {
            // exiting the method
       }

    field.isValid = true;
    const promises: Promise<any>[] = [];
    [...field.rules].reverse().forEach((rule) => {
      const res = this.validateFieldRule(
        key,
        field.elem,
        rule,
        afterInputChanged
      );

      if (isPromise(res)) {
        promises.push(res as Promise<any>);
      }
    });

    if (field.isValid) {
      this.setFieldValid(key, field.config?.successMessage);
    }

    return Promise.allSettled(promises).finally(() => {
      if (afterInputChanged) {
        this.onValidateCallback?.({
          isValid: this.isFormValid(),
          isSubmitted: this.isSubmitted,
          fields: this.getCompatibleFields(),
          groups: { ...this.groupFields },
        });
      }
    });
  }

[viroff]

After examining the library code, I solved my problem by adding custom validation to the validation rule. It is enough to describe the validation mechanism in the validator attribute and its error will not be erased by others. Unfortunately, this means that using showErrors does not work that way and is not suitable for me.

        .addField('#login', [
            {rule: 'minLength', value: 6, errorMessage: 'Логин должен содержать минимум 6 символа'},
            {
                validator: (value, context) => value === 'невалидно' ? false : true,
                errorMessage: 'эта ошибка не перетирается другими'
            }

[alexey-anufriev]

I had to do the same, but some of the validations are complex and not portable to the front-end. For this reason, having a fix would be appreciated. Still, since half a year there is no commits to the project and since a year - no releases, not sure how good are our chances to get a fix.

[viroff]

but described method doesn't work with async validators: #109.