payload field validators

payload-field-validators

Easy validation handlers for Payload CMS collection's fields

Usage

Quick start

Assuming we have a Collection

export default MyCollection: CollectionConfig = {
  // other fields..
    {
      name: "number_field",
      type: "number",
    },
    {
      name: "text_field",
      type: "text",
    }
    // other fields..
}

We can add a validator to TextField:

{
  // other configs..
  validate: (value: any) =>
    validateField({
      condition: value.length < 100,
    })
}

Similarly, we can add a validator to NumberField:

{
  // other configs..
  validate: (value: any) =>
    validateField({
      condition: value > 100,
    })
}

The default message will be "Invalid input"

Advanced

• The default error message could be overridden using the message param:

{
    // other field's configs..
    name: "percentage_usage",
    validate: (value: any) => validateField({
      condition: value > 20 and value < 50,
      message: "percentage must be between 20 to 50 %"
  })
}

• We can leverage multiple validator to NumberField and for each case to show appropriate message:

{
  name: "grade",
  type: "number",
  required: true,
  validate: (value: any) => validateField([
      {
        condition: value >= 55,
        message: "Grade must be at minimum 55"
      },
      {
        condition: typeof value === "number" && Number.isInteger(value),
        message: "Grade must be an Integer"
      }
  ])
},

Using Validations libraries

You can use form validation libraries like valibot/zod/vest to write more concise conditions

Valibot Example

using valibotCheck utility

// import valibot
import * as v from "valibot";

//....
{
  name: "grade",
  type: "number",
  required: true,
  validate: (value: any) => validateField({
      condition: valibotCheck(v.pipe(v.number(), v.integer(), v.minValue(55), value)),
      message: "Grade must be an Integer, minimum 55"
  })
},

Specific use-cases

• Adding Regex validator to TextField

const onlyLettersRegex = /^[a-zA-Z0-9]+$/;
export default MyCollection: CollectionConfig = {
    {
      name: "name",
      type: "text",
      admin: {
      readOnly: false,
        hidden: false
    },
    validate: (value: any) => validateRegex(
      onlyLettersRegex,
      value,
      "Name must not contain special characters"   // (optional error message)
    ),
    required: true
}

• Adding Email validator to TextField

export default MyCollection: CollectionConfig = {
    {
      name: "email",
      type: "text",
      validate: (value: any) => validateEmail(value, optionaLmessage),    // --> add this line
      required: true
}

• Adding URL validator to TextField

export default MyCollection: CollectionConfig = {
    {
      name: "url",
      type: "text",
      admin: {
      readOnly: false,
        hidden: false
    },
    validate: (value: any) => validateUrl(valuem optionaLmessage),    // --> add this line
    required: true
}

• Adding IP Address validator to TextField

export default MyCollection: CollectionConfig = {
    {
      name: "website_url",
      type: "text",
      admin: {
      readOnly: false,
        hidden: false
    },
    validate: (value: any) => validateIPAddress(value),    // --> add this line
    required: true
}