use-form-schema

1.0.6 • Public • Published

React hook use-form-schema

use-form-schema implements React hook to handle form validation and errors messages.

Installation

Use your package manager:

npm i use-form-schema

or

yarn add use-form-schema

Usage

First you have to import hook:

import useFormSchema from 'use-form-schema';

Next, define your form schema for validation process and create function for handling form data:

const AppLoginForm = () => {
    const schema = {
        login: {
            required: 'Field is required',
            min: [4, 'Login must contain at least 4 characters']
        },
        password: {
            required: 'Field is required'
        }
    }
    
	const { register, errors, setErrors, isValidated } = useFormSchema(schema);
    const handleSubmit = data => {
        //...handle form data here...
        //...if you want to handle messages from your backend:
        if(req.status === 400) setErrors(err.response.data.messages);
    }
    
    return (...);
}

Form example:

<form {...register(handleSubmit)}>
    <input type="text" name="login"/>
    { errors.login && <p>{errors.login[0]}</p>}

    <input type="password" name="password"/>
    { errors.password && <p>{errors.password[0]}</p>}

    <button type="submit">Log in</button>
</form>

If you're using form component and you can't register form:

const {ref, onSubmit} = register(handleSubmit);

<Form onSubmit={onSubmit}>
    <div ref={ref}/>
	...
</Form>

This automatically bind ref to parent form element.

Documentation

use-form-schema hook takes the schema parameter and returns register, setErrors, reset functions, errors object and isValidated boolean.

const { register, errors, setErrors, isValidated, reset } = useFormSchema(schema);

Schema is an object in which you define what fields you want to validate. For example:

const schema = {
    login: {
        required: 'Field is required!'
    }
}

Input with name login can't be empty, otherwise in errors object an appropriate message will be added.

To show the error message: (use index zero to show one message)

{ errors.login && errors.login[0] }

isValidated tells when form was validated and sended. If you do any changes after submit, the value will be false. Used to show or hide messages after the current form has been submitted.

setErrors function sets errors for each field. The param what that function takes must be an object like:

{
    fieldname: ['message1', 'message2'],
    otherfieldname: ['message']
}

Used to handle messages from API, for example if login or email are already taken.

register function handles all form data by adding event listeners for each field. Takes callback parameter and if form is valid, passes an object with data to this callback. Callback is used for handling API requests with form data.

<form {...register(handleSubmit)}>

reset function clears errors and fields.

NOTE! If you want to handle files add encType="multipart/form-data" to form tag!

Validators

Validator Params Usage
required message:string { required: 'Field is required!' }
min array[value:integer, message:string] { min: [4, 'Field text is too short'] }
max array[value:integer, message:string] { max: [12, 'Field text is too long'] }
equalField, notEqualField, ltField, lteField, gtField, gteField array[fieldName:string, message:string] { equalField: ['password', 'Passwords is not the same'] }
equal, notEqual, lt, lte, gt, gte array[value:any, message:string] { equal: [1000, 'Field value is not equal to 1000'] }
in array[values:array, message:string] { in: [['banana', 'apple'], 'Field value is not valid fruit'] }
notIn array[values:array, message:string] { notIn: [['corn', 'leek'], 'Field value is fruit'] }
regexp array[value:regexp, message:string] { regexp: [/^[0-9]+/, 'Field value is not integer'] }
pattern array[value:string, message:string] { pattern: ['email', 'Is not valid email address'] }

Validators for handling files

Validator Params Usage
required message:string { required: 'Field is required!' }
ext array[value:string, message:string] { ext: ['png', 'File must be png' }
extAllowed array[value:string, message:string] { extAllowed: [['png', 'jpg'], 'File is not allowed'] }
extNotAllowed array[value:string, message:string] { extNotAllowed: [['zip', 'rar'], 'File is not allowed'] }
sizeEqual, sizeNotEqual, sizeGt, sizeGte, sizeLt, sizeLte array[value:any, message:string] { sizeLt: [2000, 'File is to big'] }
type, typeIn, typeNotIn array[value:any, message:string] { type: ['text/plain', 'Unknow file type'] }

Custom validators

Validator Params Usage
validate array[value:function, params:object, message:string] { validate: [checkPassword, { blackList }, 'Password is not allowed'] }
validate array[value:function, message:string] { validate: [checkPassword, 'Password is the same as login'] }
validator value:function { validator: checkPassword }

Examples for custom validators:

validate with params

const blackList = ['admin', 'password', 'test'];

const checkPassword = (fieldValue, params, formData) => {
    return !params.blackList.includes(fieldValue);
}

const schema = {
    login: {
      	required: 'Field is required',
    },
    password: {
        required: 'Field is required',
        validate: [checkPassword, { blackList }, 'Password is not allowed']
    }
};

validate without params

const checkPassword = (fieldValue, formData) => {
    return !(fieldValue === formData.login);
}

const schema = {
    login: {
      	required: 'Field is required',
    },
    password: {
        required: 'Field is required',
        validate: [checkPassword, 'Password is the same as login']
    }
};

validator

const checkPassword = (fieldValue, formData) => {
    if(fieldValue === formData.login) return 'Password is the same as login';
    if(fieldValue.length < 3) return 'Password is too short!';
}

const schema = {
    login: {
      	required: 'Field is required',
    },
    password: {
        required: 'Field is required',
        validator: checkPassword
    }
};

Patterns

Pattern list for pattern validator:

Pattern Description
email Checks if field value is valid email address
number Check if field value is number
double Check if field value is double (with dot ex: 12.551)
integer Check if field value is integer
alpha Check if field value has alphanumeric characters

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i use-form-schema

      Weekly Downloads

      1

      Version

      1.0.6

      License

      ISC

      Unpacked Size

      19.3 kB

      Total Files

      3

      Last publish

      Collaborators

      • pmemo