Validation


<>
  <L.Input
    form='testForm'
    name='inputField'
    placeholder='enter an email please'
    isRequired
    requiredMessage='Do not leave me empty'
    validator='email'
    invalidMessage={<i>Please enter a valid email</i>}
    _w-48
    _mb-3
  />
  <L.Button
    form='testForm'
    onValidationFail={({ invalidForms }) => log(invalidForms)}
    shouldScrollToInvalidFields
    scrollOffset={100}
    onClick={({ form }) => log(form)}
  >
    Submit
  </L.Button>
</>

Each Form component (except Button) has Validation props which help validate user input, show messages etc.

form and name are obligatorty fields to enable validation.

Validation

NameTypeDescription
form
string
Form name
name
string
Component name
isRequired
boolean
If you don't want the field to be empty
isValid
boolean
Controlled valid state
invalidMessage
ReactNode
Text to show when the value does not match requirements
invalidMessageRender
RenderEvent => ReactNode
Invalid message customizator
requiredMessage
ReactNode
Text to show when the field is not filled
shouldValidateUnmounted
boolean
The field can still affect form submission even if it is not rendered
validator
Validator | PredefinedValidator | RegExp | ValidatorObject[]
interface Validator { (value: any): boolean, }

A validator is a function that takes a value and returns true or false depending on the logic it contains

E.g. (value) => value.length > 4

type PredefinedValidator = | 'creditCardNumber' | 'email' | 'url'

See predefined validators

interface ValidatorObject { validator: PredefinedValidator | RegExp | Validator, invalidMessage?: string, }

ValidatorObject is useful wnen you need to validate a value against several validators and show inividual messages for each.
Just use an array of validator objects.

E.g.

[ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

Button validation props

NameTypeDescription
form
string | string[]
Button can be attached to a form or to several forms
onClick
(SubmitEvent) => void

Form submit handler.

It does not work if the form has invalid fields

interface SubmitEvent extends React.MouseEvent<HTMLButtonElement> { form?: { [formName: string]: { [fieldName: string]: Field, }, }, forms?: Form[], }

Submit event is a plain click event with form and forms fields being added.

form and forms have the same form data structured differently.

form is an object-like structure.
forms gives the same data in an array-like structure.

When the button is attached to several forms form is empty

onValidationFail
type ValidationFailEvent = React.MouseEvent<HTMLButtonElement> & { invalidForms: Form[] }

It fires when the button is clicked and the form has invalid fields.

onClick handler does not start

interface Form { name: string, fields: Field[], }
interface Field { invalidMessages?: string[], isRequired: boolean, isValid: boolean, name: string, requiredMessage?: string, reset: () => void, setIsValid: SetState<boolean>, setMessages: SetState<string[] | undefined>, suggestion?: Suggestion | null, shouldValidateUnmounted: boolean, validators: ValidatorObject[], value: any, }

Field has all available data for a particular form field

scrollDelay
number
How many seconds the form should wait before scrolling to invalid fields
scrollOffset
number
How many pixels should be added between the screen top and the first invalid field
shouldScrollToInvalidFields
boolean
Scroll to invalid fields on button click

See Validation examples section for more.