Validating array

[pablos91]

Hello,

Is there any possibility to validate array of elements ? We are validating a set of terms user has to accept in our form, we use async call to api which then returns proper dataset for the validation but at the end there's no entry in messages array.

Please find the attached code fragments to better undestand what we want to achieve:

  const serverCheck = createAsyncRule(change => formSubmit(change), ({ msg }) => `${msg}`);

  const [messages, validate] = useValidator({
    email: [serverCheck],
    receiptNumber: [serverCheck],
    date: [serverCheck],
    time: [serverCheck],
    fileUrl2: [serverCheck],
    reCaptchaResponse: [serverCheck],
    consents: [serverCheck],
  });

then formSubmit action returns below object:

{
  "data": [
    {
      "type": "async",
      "prop": "email",
      "msg": "Podaj swój adres e-mail"
    },
    {
      "type": "async",
      "prop": "receiptNumber",
      "msg": "Proszę uzupełnić nr paragonu"
    },
    {
      "type": "async",
      "prop": "date",
      "msg": "Brak daty"
    },
    {
      "type": "async",
      "prop": "time",
      "msg": "Należy podać czas"
    },
    {
      "type": "async",
      "prop": "fileUrl2",
      "msg": "Brak pliku"
    },
    {
      "type": "async",
      "prop": "reCaptchaResponse",
      "msg": "Proszę rozwiązać zadanie"
    },
    {
      "type": "async",
      "prop": "consents[0]",
      "msg": "Zgoda wymagana"
    },
    {
      "type": "async",
      "prop": "consents[1]",
      "msg": "Zgoda wymagana"
    },
    {
      "type": "async",
      "prop": "consents[2]",
      "msg": "Zgoda wymagana"
    },
    {
      "type": "async",
      "prop": "consents[3]",
      "msg": "Zgoda wymagana"
    }
  ],
  "status": -2,
  "message": "VALIDATE_ERROR"
}

You can see that the array I mentioned is consents. We can try to adapt the return object so it will be an array on return as well. Didn't see any docs about such specific situation.

And then the messages object:

{
  "email": "Podaj swój adres e-mail",
  "receiptNumber": "Proszę uzupełnić nr paragonu",
  "date": "Brak daty",
  "time": "Należy podać czas",
  "fileUrl2": "Brak pliku",
  "reCaptchaResponse": "Proszę rozwiązać zadanie"
}

It doesn't get interpreted at all.

I assume the below object would fulfill everyone's needs:

{
  "email": "Podaj swój adres e-mail",
  "receiptNumber": "Proszę uzupełnić nr paragonu",
  "date": "Brak daty",
  "time": "Należy podać czas",
  "fileUrl2": "Brak pliku",
  "reCaptchaResponse": "Proszę rozwiązać zadanie",
  "consents: [
      "Proszę wyrazić zgodę",
      "Proszę wyrazić zgodę"
   ]
}

then the following code would render errors properly:

<div className="text-danger" style={{ minHeight: "23px" }}><small>{messages.consents[i]}</small></div>

[ttoohey]

I think the problem is that your { type, prop } items have a prop with value "consents[0]" etc which don't match any of the fields in your rules object.

I would treat consents as the property to be validated and have the rule for that property contain a payload with an array that identifies which elements have failed. This way there's only one entry in the data array to cover all the consents items.

One option is for fields that have an array values, expect array validation messages with nulls for items that pass the validation check.

Consider this example where consents is an array with two items. The first item passes validation, but the second has a validation message.

change = { ... , consents: [ "item 1", "item 2" ] }

formSubmit(change) 
// returns
{
  data: [ 
     ..,
     { 
       type: "async", 
       prop: "consents", 
       msg: [ null, "item 2 message"  ] 
     }
  ],
  status: -2
}

Note that createAsyncRule expects a function that returns an array of { type, prop } objects so you do need to manipulate the response from formSubmit(). Something like:

const serverCheck = createAsyncRule(change => formSubmit(change).then(({ data }) => data), ({ msg }) => msg)