form-validation frontend react-form-validation react-hook

React Form Validation using React Hooks.

import useState, useEffect, useCallback from ‘react’;

import useState, useEffect, useCallback from ‘react’;
perform useForm(stateSchema, validationSchema = , callback)
const [state, setState] = useState(stateSchema);
const [disable, setDisable] = useState(true);
const [isDirty, setIsDirty] = useState(false);
// Disable button in initial render.
useEffect(() =>
setDisable(true);
, []);
// For each changed in our state this can be fired
// To have the ability to disable the button
useEffect(() =>
if (isDirty)
setDisable(validateState());

, [state, isDirty]);
// Used to disable submit button if there’s an error in state
// or the required area in state has no value.
// Wrapped in useCallback to cached the perform to keep away from intensive reminiscence leaked
// in each re-render in element
const validateState = useCallback(() =>
const hasErrorInState = Object.keys(validationSchema).some(key =>
const isInputFieldRequired = validationSchema[key].required;
const stateValue = state[key].worth; // state worth
const stateError = state[key].error; // state error
return (isInputFieldRequired && !stateValue)
stateError;
);
return hasErrorInState;
, [state, validationSchema]);
// Used to handle every modifications in every input
const handleOnChange = useCallback(
event =>
setIsDirty(true);
const identify = event.target.identify;
const value = event.goal.worth;
let error = ”;
if (validationSchema[name].required)
if (!value)
error = ‘This is required area.’;

if (
validationSchema[name].validator !== null &&
typeof validationSchema[name].validator === ‘object’
)
if (value && !validationSchema[name].validator.regEx.check(value))
error = validationSchema[name].validator.error;

setState(prevState => (
…prevState,
[name]: worth, error ,
));
,
[validationSchema]);
const handleOnSubmit = useCallback(
occasion =>
event.preventDefault();
// Ensure that validateState returns false
// Earlier than calling the submit callback perform
if (!validateState())
callback(state);

,
[state]);
return state, disable, handleOnChange, handleOnSubmit ;

export default useForm;

// Outline your state schema
const stateSchema =
fname: worth: ”, error: ” ,
lname: worth: ”, error: ” ,
tags: worth: ”, error: ” ,
;

// Outline your validationStateSchema
// Observe: validationStateSchema and stateSchema property
// must be the same in-order validation works!
const validationStateSchema =
fname:
required: true,
validator:
regEx: /^[a-zA-Z]+$/,
error: ‘Invalid first identify format.’,
,
,
lname:
required: true,
validator:
regEx: /^[a-zA-Z]+$/,
error: ‘Invalid final identify format.’,
,
,
tags:
required: true,
validator:
regEx: /^(,?w3,)+$/,
error: ‘Invalid tag format.’,
,
,
;

perform onSubmitForm(state)
alert(JSON.stringify(state, null, 2));

return state, disable, handleOnChange, handleOnSubmit ;

import React from ‘react’;
import useForm from ‘./useForm’;
perform Form()
// Define your state schema
const stateSchema =
fname: worth: ”, error: ” ,
lname: worth: ”, error: ” ,
tags: value: ”, error: ” ,
;
// Define your validationStateSchema
// Word: validationStateSchema and stateSchema property
// must be the same in-order validation works!
const validationStateSchema =
fname:
required: true,
validator:
regEx: /^[a-zA-Z]+$/,
error: ‘Invalid first identify format.’,
,
,
lname:
required: true,
validator:
regEx: /^[a-zA-Z]+$/,
error: ‘Invalid final identify format.’,
,
,
tags:
required: true,
validator:
regEx: /^(,?wthree,)+$/,
error: ‘Invalid tag format.’,
,
,
;
perform onSubmitForm(state)
alert(JSON.stringify(state, null, 2));

const state, handleOnChange, handleOnSubmit, disable = useForm(
stateSchema,
validationStateSchema,
onSubmitForm
);
const errorStyle =
colour: ‘pink’,
fontSize: ’13px’,
;
return (


state.fname.error &&

state.fname.error


state.lname.error &&

state.lname.error


state.tags.error &&

state.tags.error


);

export default Form;

// Define your state schema
const stateSchema =
fname: worth: ”, error: ” ,
lname: value: ”, error: ” ,
tags: value: ”, error: ” ,
;

// Define your validationStateSchema
// Notice: validationStateSchema and stateSchema property
// must be the same in-order validation works!
const validationStateSchema =
fname:
required: true,
validator:
regEx: /^[a-zA-Z]+$/,
error: ‘Invalid first identify format.’,
,
,
lname:
required: true,
validator:
regEx: /^[a-zA-Z]+$/,
error: ‘Invalid final identify format.’,
,
,
tags:
required: true,
validator:
regEx: /^(,?wthree,)+$/,
error: ‘Invalid tag format.’,
,
,
;

perform onSubmitForm(state)
alert(JSON.stringify(state, null, 2));

const state, handleOnChange, handleOnSubmit, disable = useForm(
stateSchema,
validationStateSchema,
onSubmitForm
);

return (


state.fname.error &&

state.fname.error


state.lname.error &&

state.lname.error


state.tags.error &&

state.tags.error


);

import React from ‘react’;
import Form from ‘./Form’;
import emblem from ‘./emblem.svg’;
import ‘./App.css’;
perform App()
return (

react-logo

React Form Validation using React Hooks.

);

export default App;