Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug Report: Asynchronous Validations Not Working Properly #827

Open
Nuwa-Hub opened this issue Dec 5, 2024 · 0 comments
Open

Bug Report: Asynchronous Validations Not Working Properly #827

Nuwa-Hub opened this issue Dec 5, 2024 · 0 comments

Comments

@Nuwa-Hub
Copy link

Nuwa-Hub commented Dec 5, 2024

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}'`,
            ),
          );
        }
      });
    });
  }),
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant