Can't add external results with Composition API

[louis-kevin]

Describe the bug
When adding external error to vuelidate, it does not add into field

One of the examples I as able to add only to fields that have rules

In other example I just can't add at all

I do not tested in Options API

Reproduction URL
This just does not work at all

This does not work for input without rules

[pm-consultancy]

Hi Louis-kevin,
I've run in the same problem as you, and is most likely by design
workaround for this is:

const externalServerValidation = () => true

const rules = {
field: { externalServerValidation},
otherField: { externalServerValidation }
}

const state = {
field: null, 
otherField: null}

const v$ = useVuelidate(rules, state, { $external..... you probally know what to do next})

[louis-kevin]

Thanks for the response @PaulMenheere
It seems to work, but It will me better if the external validation could add keys so we don't need to add inputs that does not have a rule in front end

Also, I stamble in this problem when I was trying to create components with default rules, but even if I add the workaround, it seems that the child component does not have the error and only the parent vuelidate has the error

I created this example, to reproduce the error

I don't really know if its by design, a bug or a new feature

Can you guys enlighten me @dobromir-hristov @shentao ?

[louis-kevin]

Here a code example:

// Child.vue
const props = defineProps({ modelValue: {} });

const inputChild = ref(props.modelValue);

const rules = {
  inputChild: {
    required,
  },
};

const v = useVuelidate(rules, { inputChild });

// The main idea here is: this vuelidate instance receive the external validation from parent vuelidate instance

// Parent.vue
const state = reactive({
  inputInParent: "asdfsd",
  inputChild: "asdf",
});
const $externalResults = reactive({});

const externalServerValidation = () => true;

const rules = {
  inputInParent: { required },
  inputChild: { externalServerValidation }, // Better if I don't need to declare the child rules
};
const v = useVuelidate(rules, state, { $externalResults });

// validate method
async function validate() {
  if (!(await v.value.$validate())) return;

  const errors = {
    inputInParent: "Error in inputInParent",
    inputChild: "Error in input in child",
  };
  Object.assign($externalResults, errors);
}

[melishev]

I encountered the same problem. The error from the server is written to externalResults and passed to v$.

In the developer console I can see the following:

That is, the error is passed to the field, but it is not passed to the overall form error-state

[kirkbushell]

Yup, there seems to be a bug with it not updating the state of the errors for validation, even though it's there. The docs are simply wrong currently.

[kirkbushell]

So I found an interesting thing - externalResults errors go to $silentErrors. This isn't mentioned anywhere in the documentation. So you have to check boith $errors and $silentErrors (for reasons unbeknownst to me) to get the error output.

[mostafa-A48]

I have the same problem and used const externalServerValidation = () => true