How to validate server errors for the collections?

[garf]

Make sure that you are familiar with documentation before submitting an issue.

https://vuelidate-next.netlify.com/

Describe the bug when I set the $externalResults errors for the object fields - it works fine. But when I set the errors for the collections (arrays) it's setting the path incorrectly.

To Reproduce

const form = {
    dogs: [
        age: 1000,
    ],
    [
        age: 3,
    ],
}

const rules = {
    dogs: {
        $each: helpers.forEach({
            age: { numeric },
        }),
    }
}

const $externalResults = ref({});
const $v = useVuelidate(rules, form, { $externalResults });


// After validation

$externalResults.value = {
    dogs: [
        {
            age: ["Dogs can't live 1000 years"],
        },
    ],
}

But in the $v validation object under $v.dogs.$each.$response.$errors[0].age it's an empty array. Even though I see errors at $v.$errors[0].$message.age

[dobromir-hristov]

What if you do $externalResults.value.dogs.$each = ['foo', 'bar'] ? keep in mind, if you really want to take advantage of of the full potential of Vuelidate collection validation, you should just use nested children for collections.

[garf]

@dobromir-hristov Thank you for the answer. But I didn't understand what do you mean here. Just to wrap the response in $each in this case? Also I didn't understand the second sentence at all :)

[dobromir-hristov]

Very late reply on my end, sorry about that.

For ppl who find this, I suggest you check Validating Collections, for more info on how to validate arrays of data.

If you insist on using $each helper, you can try this:

const form = {
    dogs: [{ age: 1000 }, { age: 3 }],
}

const rules = {
    dogs: {
        $each: helpers.forEach({
            age: { numeric },
        }),
    }
}

const $externalResults = ref({
  dogs: null
});

const $v = useVuelidate(rules, form, { $externalResults });


async function validate() {
  // do some validation on server
  await sendToServer(form)
  $externalResults.value = {
    dogs: {
      $each: [
          {
            age: {
            numeric: ["Dogs can't live 1000 years"],
          }
        }
      ]
    }
  }
}

[TCURT15]

I'm having a similar issue with external validation and arrays. I've tried to use the suggestion @dobromir-hristov made above but not having any luck. Any assistance would be greatly appreciated!

Example:

data() {
    return {
      vuelidateExternalResults: {},
      form: {
        items: [{
          name: null,
        }],
      }
    }
  },
  validations() {
    return {
      form: {
        items: {
          $each: helpers.forEach({
            name: {
              required: helpers.withMessage('Please enter a value', required),
            },
          })
        },
      }
    }
  }

Tried setting error numbers ways including

Object.assign(this.vuelidateExternalResults, {
  form: {
    items: {
      $each: [{
        name: ['Already exists']
      }]
    }

  }
})

Object.assign(this.vuelidateExternalResults, {
  form: {
    items: [{
      name: ['Already exists']
    }]
  }
})

[martinszeltins]

I was also looking for a way to validate collections with external results and the solution that @dobromir-hristov posted is working perfectly fine for me. 👍🏻

"$externalResults": [
      {
        "$propertyPath": "items",
        "$property": "items",
        "$validator": "$externalResults",
        "$uid": "items-externalResult-0",
        "$message": {
          "$each": [
            {
              "description": "Server says that [0] this is required!"
            },
            {
              "description": "This second [1] field is also required, says the server!!"
            }
          ]
        },
        "$params": {},
        "$response": null,
        "$pending": false
      }
    ],