Forms and validation

To create a form put the same value to the form attribute.

All form attributes except form and name are optional. Buttons do not have names.

Components can be controlled or uncontrolled, it does not matter, do as you like.

All form data can be retrieved from the onClick event or using form API.

<>
  <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>
</>

Validation components' props

Name	Type	Description
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

Name	Type	Description
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