Skip to content

Bug Report: Asynchronous Validations Not Working Properly #827

@Nuwa-Hub

Description

@Nuwa-Hub

Scenario

I attempted to validate a password field using the following validation rules:

  • Strength Check (Asynchronous): Validates the strength of the password (e.g., through an API call).
  • Required Check (Synchronous): Ensures the password is not empty.
  • Length Check (Synchronous): Ensures the password meets the minimum length requirement.

In this setup:

The strength check takes time due to its asynchronous nature.
If the required or length validations fail, but the asynchronous strength check resolves successfully afterward, the field is still marked as valid.
This occurs because Promise.all resolves with the first validation to succeed and does not aggregate all failures.
Expected Behavior
All validation rules (synchronous and asynchronous) should execute fully.
If any validation fails, the errors should be aggregated and displayed.
The field should only be marked as valid if all rules pass successfully.

When running asynchronous validations using Promise.all, the validation process does not handle the results as expected. Specifically, if a rule returns an error message (a string), it is rejected as part of the promise chain. This causes unexpected behavior when multiple validation rules are executed simultaneously.

The problematic code is as follows:

path:'composables/useField.ts'

const allValidations = Promise.all(
  rules.value.map(func => {
    return new Promise<boolean>((resolve, reject) => {
      Promise.resolve(func(modelValue.value)).then(valid => {
        if (valid === true) {
          resolve(valid);
        } else if (typeof valid === 'string') {
          reject(valid); // Error message treated as a rejection
        } else {
          reject(
            new Error(
              `Rules should return a string or true, received '${typeof valid}'`,
            ),
          );
        }
      });
    });
  }),
);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions