✒️
Notes
  • Lirenxn's daily notes
  • Featured
    • Concurrent on fiber and requestIdleCallback
    • Deep dive eslint
      • eslint with class property
      • eslint with fix
      • eslint with jsx
    • A opinioned intro to React Hooks
      • React Hooks 1 - An Overview
      • React Hooks 2 - A mindset change
      • React Hooks 3 - Test Hooks
    • Handy tricks
    • About Micro FrontEnd
    • Same-site cookie
    • Thoughts
      • Application Security for frontend OWASP
      • Javascript this
      • React validation
  • 2020 Daily Notes
    • Notes-04-05-eslint-and-babel
    • Notes-04-03-Hard-interview-question
    • Notes-03-31-ReactContext-JS-inherit
    • Notes-03-28-digital-signing-webpack-dynamic-import-JsonRest-Promise-pattern-performance.measure()
    • Wk-notes-03-16-i18n-solution
    • Notes-03-15-Concurrent-with-requestIdleCallback
    • Notes-03-15-Micro-frontend
    • Wk-notes-03-09-micro-frontend-bootstrapper
    • Wk-notes-02-27-API-design-(g)RPC-REST-etc
    • Wk-notes-02-26-React-form-validation-Boolean-algebra-Rule-for-this-App-security-npm-devtool-tricks
    • Wk-notes-02-18-i18n-gRPC
    • Wk-notes-02-11-Gradual-rollout-webpack-vscode-auto-import
    • Note-02-09-spring-webpack
    • Wk-notes-02-06-more-webpack
    • Wk-notes-02-05-Learn-spring-webpack
    • Wk-notes-02-04-props-drilling-virtual-list
    • Wk-notes-02-03-same-site-cookie
    • Wk-notes-01-31-g-recaptcha-npmshrinkwrap
    • Wk-notes-01-30-React-ref
    • Wk-notes-01-23-remote-android
    • Wk-notes-01-23-test-hook
    • Wk-notes-01-22-about-Hooks
    • Wk-notes-01-17-bundling-browser-module-treeshake-2
    • Wk-notes-01-16-Bundling-Treeshaking-1
    • Wk-notes-01-13-npm-script-css-scroll
    • Wk-notes-01-13-touchscreen-hover-and-apis
    • Wk-notes-01-13-emotion-x
    • Wk-notes-01-10-codemod
    • Wk-notes-01-08-live-region-react-test-lib
    • Wk-notes-01-06-eslint-finalise
  • 2019 Daily Notes
    • Wk-notes-12-11-eslint-dive-vscode-debug
    • Wk-notes-12-10-eslint-dive
    • Wk-notes-12-6-splunk
    • Wk-notes-12-3-react-function-memo
    • Wk-notes-12-2-agile-test-micro-frontend
    • Wk-notes-11-29-npm-fix-aem-datalayer-test
    • Wk-notes-11-28-adobe-dataLayer
    • Wk-notes-11-27-a11y
    • Wk-notes-11-25-upgrade-preact
    • Wk-notes-11-22-a11y-n-voice-over
    • Wk-notes-11-21-Add-Typescript
    • Wk-notes-11-20-JSDoc
    • Wk-notes-11-19-A11y-Polyfill
    • Wk-notes-11-18-jest-mock
    • Wk-notes-11-15-React-Portal
    • Wk-notes-11-14-iOS-simulator-git-hooks-All-hands-testing
    • Wk-notes-11-13-i18n
    • Wk-notes-11-12-safari-remote-debug
    • Wk-notes-11-11-migrating-typescript-git-remote-label-Emotion-controlled-component
    • Wk-notes-11-08-living-pricing-arch
    • Wk-notes-11-07-vitual-box-n-onblur-for-div
    • Wk-notes-11-06-bug-race-virtual-dom-diff
    • Wk-notes-11-05-babel-loader-eslint
Powered by GitBook
On this page
  • React form validation
  • Common practice
  • Form-level Validation
  • Field-level validation

Was this helpful?

  1. Featured
  2. Thoughts

React validation

React form validation

Challenge

  • Reuse validation rules, how much flexibility, to compose rules, declarative way and

  • Dependencies, from redux, window, (Parent) Components, form state, react-context

  • When to run validation, onChange, onBlur, onSubmit, imperative manual trigger will cause nightmare

  • Async validation, needed to be cancellable

  • Dirty/touch check is validations is declarative and run on every fields (which is good)

Common practice

Form-level Validation

Complete access to all form state and props whenever the function runs, so you can validate dependent fields at the same time.

validationContext can be passed and handled from the same level (top-level)

I. Formik:

<Formik validate={fn}> and withFormik({ validate: fn }), fn as (formInfo) => errors

<Formik validationSchema={yupSchema}> and withFormik({ validationSchema: yupSchema })

II.React-Hook-Form:

const { register, handleSubmit, errors } = useForm({
    validationResolver: resolver,
    /*
    resolver as (data, context) => errors;
    */
    validationContext: { test: "test" }
  });

etc.

Yup is awesome

Field-level validation

I. Formik: <Field component={Input} name="name" validation={validationFn}>

II. React-Hook-Form:

<Controller as={TextField} name="TextField" control={control} defaultValue="" rule={validationObject}/>

or

<input ref={register(ValidationObject)} name="Name"/>

etc.

Another approach validation

A list of validation rules:

validation id binds to i18n, rule, seems easy while hard for compose and plug.

For rules based logic, consider boolean algebra, and using correct AND, OR, XOR rules:

validationsToTrigger for onChange event, validationsToClear for Priority overwrite. validationsToClear can be used for each validation rules, or fields

Hand pick rule for Component onChange.

PreviousJavascript thisNext2020 Daily Notes

Last updated 5 years ago

Was this helpful?

Ref:

https://jaredpalmer.com/formik/docs/guides/validation