Validations

Validation is an essential part of any form building. Whether you want to make sure the user has actually entered an email or a password is strong enough, you will want to implement both a per input validation or a full form validation using conditional validations. Formulaik takes the validation out of the components onto the inputs. The formulaik engine you use is responsible for implementing the validation. For instance the official React engine uses yup for validation.

Define validations

Let's take the case of an email input:

{
    component: 'input',
    id: 'email',
    label: 'Email',
    type: "string",
    params: {        
        placeholder: "email@domain.com"
    },
    validations: [
        {
            kind: "format",
            value: "email",
            message: 'Invalid email format',
        },
        {
            kind: "required",
            value: true,
            message: "This field can't be blank",
        },
    ],
}   

• We expect a string data type. This is important for the validation. By default it is set to string.
• We have declared two validations
  • format: make sure it's an email
  • required: this field is required

Formulaik processes both validations in sequential order. It stops when the validation fails and displays the error message.

Validation kinds per data type

Formulaik supports these validations per data type out of the box:

String

Kind	Condition	Options
required	Text is required	message?: string error message
length	Set a required length for the string value. The ${value} interpolation can be used in the message argument	message?: string error message value?: number desired length
min	Set a minimum length limit for the string value. The ${value} interpolation can be used in the message argument	message?: string error message value: number minimum desired length
max	Set a maximum length limit for the string value. The ${value} interpolation can be used in the message argument	message?: string error message value: number maximum desired length
matches	Provide an arbitrary regex to match the value against	message?: string error message value: string regex
email	Validates the value as an email address using the same regex as defined by the HTML spec.	message?: string error message WATCH OUT: Validating email addresses is nearly impossible with just code. Different clients and servers accept different things and many diverge from the various specs defining "valid" emails. The ONLY real way to validate an email address is to send a verification email to it and check that the user got it. With that in mind, yup picks a relatively simple regex that does not cover all cases, but aligns with browser input validation behavior since HTML forms are a common use case for yup. If you have more specific needs please override the email method with your own logic or regex
url	Validates the value as a valid URL via a regex	message?: string error message
uuid	Validates the value as a valid UUID via a regex	message?: string error message
datetime	Validates the value as an ISO datetime via a regex. Defaults to UTC validation; timezone offsets are not permitted	message?: string error message allowOffset?: boolean Allow offset precision?: string Precision Unlike .date(), datetime will not convert the string to a Date object. datetime also provides greater customization over the required format of the datetime string than date does. options.allowOffset: Allow a time zone offset. False requires UTC 'Z' timezone. (default: false) options.precision: Require a certain sub-second precision on the date. (default: null -- any (or no) sub-second precision)

Number

Kind	Condition	Options
min	Set the minimum value allowed. The ${value} interpolation can be used in the message argument	message?: string error message value: number minimum value
max	Set the maximum value allowed. The ${value} interpolation can be used in the message argument	message?: string error message value: number maximum value
lessThan	Value must be less than value. The ${less} interpolation can be used in the message argument	message?: string error message value: number maximum value
moreThan	Value must be strictly greater than min. The ${value} interpolation can be used in the message argument	message?: string error message value: number minimum value
positive	Value must be a positive number	message?: string error message
negative	Value must be a negative number	message?: string error message
integer	Validates that a number is an integer	message?: string error message

Boolean

#TODO

Date

Kind	Condition	Options
min	Set the minimum date allowed. When a string is provided it will attempt to cast to a date first and use the result as the limit	message?: string error message value: number minimum value
max	Set the maximum value allowed. The ${value} interpolation can be used in the message argument	message?: string error message value: number maximum value

Array

Kind	Condition	Options
length	Set a specific length requirement for the array. The ${value} interpolation can be used in the message argument	message?: string error message value?: number desired length
min	Set a minimum length limit for the array. The ${value} interpolation can be used in the message argument.	message?: string error message value: number minimum value
max	Set a maximum length limit for the array. The ${value} interpolation can be used in the message argument.	message?: string error message value: number maximum value