Lazy validation trigger

This function solves the problem (这个功能解决的问题)

As of now, i don’t see an option to change validation trigger behavior based on validation status. I am trying to achieve trigger on blur for non validated fields, if validation on blur throws an error it should change trigger to input. Once user fixes given field it should toggle back to on blur. It is in my opinion the best UX as user is not harassed as soon as he starts typing for example email. At the same time once he manages to enter incorrect value he sees he fixed the problem as soon as he corrects the value and does not need to focus out of the field.

Expected API (期望的 API)

As for the implementation maybe - and i have just flew over the code - it would be possible to get desired outcome just by accepting trigger as ref.

You could then do wrapper around validator like so:

export const makePasswordRule: FormItemRule = (options) => {
  let trigger = ref('blur');
  const passwordValidator: FormItemRuleValidator = (rule, value) => {
     const result = getValidationResult(rule, value); // at least 6 chars, required, ...
     trigger.value = result instanceof Error ? 'input' : 'blur';
     return result;
  }
  return {
    validator: passwordValidator,
    trigger: trigger
  }
}

[dav245]

So basically here is a wrapper for any validator, that returns lazy validator.

const makeValidatorWithLazyTrigger = (
  validator: FormItemRuleValidator,
) => {
  const trigger = ref('blur');

  const wrappedValidator: FormItemRuleValidator = (...args) => {
    const result = validator(...args);

    trigger.value = result instanceof Error ? 'input' : 'blur';

    return result;
  };

  return reactive({
    trigger: trigger,
    validator: wrappedValidator,
  });
};

I was quite surprised no one was dealing with this issue before me. At least not publicly. Maybe this is something worth mentioning in the docs. Still i would firstly validate, that that weird thing with reactive around ref is valid solution and not something horrible to do.

Anyways thank you for your help. I will close this issue

[dav245]

I am not totally sure why my solution is working. Maybe your insight will help. Here is working demo:

<script setup lang="ts">
const makePasswordRule: () => FormItemRule = () => {
  const trigger = ref('blur'); // Trigger is reactive
  const passwordValidator: FormItemRuleValidator = (rule, value) => {
    if (value.length < 6) {
      trigger.value = 'input';

      return new Error('password must be at least 6 characters long');
    }

    trigger.value = 'blur';
    return true;
  };

  return reactive( // and whole rule needs to be reactive too
    {
      validator: passwordValidator,
      trigger: trigger, // Linter says Ref<string> is not one of string | string[] | undefined
    }
  );
};

const rules = {
  password: makePasswordRule(),
};
</script>

<template>
  <n-form :rules="rules"></n-form>
</template>

I have tried some combinations: return nonreactive object / non ref trigger - validation works, trigger is NOT changed return nonreactive object / ref trigger - validation does not work at all return reactive object / ref trigger - everything works, just linter complains about ref<string> not being one of string | string[] | undefined return reactive object / non ref trigger - validation works, trigger is NOT changed

I honestly don’t know why combo reactive object ref trigger works.