`@datage/form-validation`

Usage

$3

create an handler to listen to form changes (submit/invalid)
- onValid: (event: HTMLFormElement) => void
- onInvalid: (event: HTMLFormElement) => void
- cancelEvent: boolean = true
- setShowErrors: (state: boolean) => void
``


import { useValidation } from '@datage/form-validation'
const submitHandler = useValidation({ onValid, onInvalid })

  {children}



$3

add an listener on the input element for the validations


import { useInputValidation } from '@datage/form-validation'
const inputRef = useRef()
const { valid, errorMessage, errors, showErrors } = useInputValidation(inputRef)

`$3`


creates a form element wrapped in a react context. add an easy validation on input elements through HTML validations.


import { ValidationForm } from '@datage/form-validation'
const onValidHandler = (form: HTMLFormElement) => {
  ...
}
const onInvalidHandler = (form: HTMLFormElement) => {
  ...
}

`@datage/form-validation`

Usage

$3


import { useValidation } from '@datage/form-validation'
const submitHandler = useValidation({ onValid, onInvalid })

  {children}



$3

add an listener on the input element for the validations


import { useInputValidation } from '@datage/form-validation'
const inputRef = useRef()
const { valid, errorMessage, errors, showErrors } = useInputValidation(inputRef)

`$3`


creates a form element wrapped in a react context. add an easy validation on input elements through HTML validations.


import { ValidationForm } from '@datage/form-validation'
const onValidHandler = (form: HTMLFormElement) => {
  ...
}
const onInvalidHandler = (form: HTMLFormElement) => {
  ...
}