@datage/form-validation
v0.0.4
Published
validate fields in react
Downloads
139
Readme
@datage/form-validation
Usage
useValidation
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 })
<form onSubmit={onValid} onInvalid={submitHandler}>
{children}
</form>
useInputValidation
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)
<input type="text" {...inputProps('name')} ref={inputRef} />
ValidationForm
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) => {
...
}
<ValidationForm onValid={onValidHandler} onInvalid={onInvalidHandler}>
<input ... required data-error-message="my-custom-error-message" />
<input ... required data-error-message="my custom error message" />
</ValidationForm>