In a real project, facing the form validation soon begin on frontend coding. After several rounds of refactoring, I completed it with 4 points in my project:
- Totally TypeScript
- Speed up development with depository support
- Custom hook
- Minimum refactoring for components
Chose Yup for validation schema definition, it is simple and easy to understand:
https://github.com/jquense/yup
npm install -S yup npm install -D @types/yup React custom hook is a common function, with parameters for input and return necessary tool methods. useFormValidator as below is a custom hook and only rely on packages "react" and "yup", no relationship with the Material-UI framework:
import React from "react" import * as Yup from 'yup' /** * Form validator state field */ interface FormValidatorStateField { /** * Is error state */ error: boolean /** * state text */ text: string } /** * Form validator state fields */ interface FormValidatorStateFields { [key: string]: FormValidatorStateField } /** * Form validatior * @param schemas Initial validation schemas * @param milliseconds Merge change update interval */ export const useFormValidator = (schemas: Yup.ObjectSchema<object>, milliseconds: number = 200) => { // useState init const defaultState: FormValidatorStateFields = {} const [state, updateState] = React.useState<FormValidatorStateFields>(defaultState) // Change timeout seed let changeSeed = 0 // Change value handler const commitChange = (field: string, value: any) => { // Validate the field, then before catch, if catch before then, both will be triggered Yup.reach(schemas, field).validate(value).then(result => { commitResult(field, result) }).catch(result => { commitResult(field, result) }) } // Commit state result const commitResult = (field: string, result: any) => { let currentItem = state[field] if(result instanceof Yup.ValidationError) { // Error if(currentItem) { // First to avoid same result redraw if(currentItem.error && currentItem.text == result.message) return // Update state currentItem.error = true currentItem.text = result.message } else { // New item const newItem: FormValidatorStateField = { error: true, text: result.message } state[field] = newItem } } else { // Success and no result, just continue if(currentItem == null) return // Delete current state result delete state[field] } // Update state, for object update, need a clone const newState = {...state} updateState(newState) } // Clear timeout seed const clearSeed = () => { if(changeSeed > 0) clearTimeout(changeSeed) } // Delay change const delayChange = (field: string, value: any) => { clearSeed() changeSeed = setTimeout(() => { commitChange(field, value) }, milliseconds) } // Merge into the life cycle React.useEffect(() => { return () => { // clearTimeout before dispose the view clearSeed() } }, []) // Return methods for manipulation return { /** * Input or Textarea blur handler * @param event Focus event */ blurHandler: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { name, value } = event.currentTarget delayChange(name, value) }, /** * Input or Textarea change handler * @param event Change event */ changeHandler: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { name, value } = event.currentTarget delayChange(name, value) }, /** * Commit change */ commitChange: commitChange, /** * State error or not * @param field Field name */ errors: (field: string) => { return state[field]?.error }, /** * State text * @param field Field name */ texts: (field: string) => { return state[field]?.text }, /** * Validate form data * @param data form data, Object.fromEntries(new FormData(form)) */ validate: async (data: any) => { try { clearSeed() return await schemas.validate(data, { strict: true, abortEarly: false, stripUnknown: false }) } catch(e) { // Reset const newState: FormValidatorStateFields = {} // Iterate the error items if(e instanceof Yup.ValidationError) { for(let error of e.inner) { // Only show the first error of the field if(newState[error.path] == null) { // New item const newItem: FormValidatorStateField = { error: true, text: error.message } newState[error.path] = newItem } } } // Update state updateState(newState) } return null } } } When use it in Materal-UI pages, for example a login page:
// Login component function Login() { // Form validator const { blurHandler, changeHandler, errors, texts, validate } = useFormValidator(validationSchemas) // Login action async function doLogin(event: React.FormEvent<HTMLFormElement>) { // Prevent default action event.preventDefault() // Form JSON data let data = await validate(Object.fromEntries(new FormData(event.currentTarget))) if(data == null) return // Local data format // Parase as model const model = data as LoginModel } return ( <Container component="main" maxWidth="xs"> <CssBaseline /> <img src={window.location.origin + '/logo.jpg'} alt="Logo" className={classes.logo}/> <div className={classes.paper}> <Avatar className={classes.avatar}> <LockOutlined /> </Avatar> <Typography component="h1" variant="h5"> Sign in </Typography> <form className={classes.form} onSubmit={doLogin} noValidate> <TextField variant="outlined" margin="normal" required fullWidth id="id" label="Id or Email" name="id" error={errors('id')} helperText={texts('id')} onChange={changeHandler} onBlur={blurHandler} autoComplete="email" autoFocus /> <TextField variant="outlined" margin="normal" type="password" required fullWidth name="password" error={errors('password')} helperText={texts('password')} onChange={changeHandler} onBlur={blurHandler} label="Password" id="password" autoComplete="current-password" /> <FormControlLabel control={<Checkbox name="save" value="true" color="primary" />} label="Remember me" /> <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit} > Sign In </Button> </form> </div> </Container> ) First declear the validation schemas, initialize 'useFormValidator' and accept the returned methods for binding:
error={errors('password')} helperText={texts('password')} onChange={changeHandler} onBlur={blurHandler} Through bindings only to current components to indicate any validation errors occur. No refactoring or extending for current components. That's the key feature of the task I enjoyed.
Top comments (2)
This is the ugliest article I have seen in a long time, no code format, no explanations, long files with few comments...
It's a rush for a reference/guide during my interview. Sorry about that. I am working on a repository of the source codes, maybe later will much helpful.