Skip to content

Improved error reporting for fields inside arrays and infer schema input types

Latest
Compare
Choose a tag to compare
@thetutlage thetutlage released this 29 Mar 06:09
· 7 commits to develop since this release

This release contains a couple of minor breaking changes. So let's first talk about them.

Improved error reporting for fields inside arrays ( Breaking )

In the previous versions of VineJS, the error reporting for fields inside arrays could have been better.

Given the following schema and data

const schema = vine.object({
  categories: vine.array(vine.number()),
})

const data = {
  categories: [1, 'foo', 'bar', 11],
}

The errors reported up until 2.0 were

{
  field: 'categories.*',
  index: 1,
  message: 'The 1 field must be a number',
  rule: 'number',
},
{
  field: 'categories.*',
  index: 2,
  message: 'The 2 field must be a number',
  rule: 'number',
}

If you notice, the field name inside arrays is defined as categories.* and not the actual index of the item inside the array. Now, you may think that I can replace the * with the index property value and get a nested path to the item index within the array.

Well, the replacement of * might work in this situation. But it will not work when there are errors inside nested arrays or the field that failed the validation is a grandchild of an array. Because the index property only exists when the field is an immediate child of an array.

But anyway, after this release, you do not have to perform any manual substitutions. The field names are nested paths with the correct index. The following is an example of errors with @vinejs/vine@2.

{
  field: 'categories.1',
  index: 1,
  message: 'The 1 field must be a number',
  rule: 'number',
},
{
  field: 'categories.2',
  index: 2,
  message: 'The 2 field must be a number',
  rule: 'number',
}

Infer Schema Input value ( Breaking )

After this release, you can infer the input values a Schema type accepts. Let's consider the following example.

import { InferInput } from '@vinejs/vine/types'

const schema = vine.object({
  is_admin: vine.boolean()
})

InferInput<typeof Schema>
{
  is_admin: boolean | string | number
}

If you notice, the is_admin property accepts a boolean | string | number. VineJS is built for parsing form inputs submitted over HTTP. Therefore, it receives all inputs as string values and performs normalization before performing any sort of validation.

Because of this change, the BaseSchema classes accept another generic value for the InputTypes. So, if you use the BaseSchema anywhere in your apps, make sure to pass the Input type as the first generic argument.

Also, please consult this commit for a better understanding of the change. df27df8

Define error messages for specific array index or a wildcard ( New feature )

Now, you will be able to define custom error messages for specific array indexes with a wildcard fallback for rest of the indexes. For example:

{
  "contacts.0.email.required": "The primary email address is required",
  "contacts.*.email.required": "The email address is required",
}

Commits

  • style: remove unused type 9dd733c
  • feat: add support for inferring schema input types df27df8
  • feat: improve error reporting for fields inside arrays 3d59dad
  • chore: update dependencies 8ff246f

What's Changed

New Contributors

Full Changelog: v1.7.0...v2.0.0