Lightweight Forms Validation in React

Complementary repository with code examples for the article Lightweight Forms Validation in React.

This code demonstrates use of Constraints validation API (supported by all modern browsers) in React.

Try it on CodeSandbox.

Contents

Individual examples are in ex-* files under src/ directory. Examples are mapped to the server path, so to visit ex-02.js visit /ex-02 on the running server (i.e. http://localhost:3000/ex-02).

• ex-01 – Basic form with the default browser validation pop-up message.
• ex-02 – Capture the validation message and display it next to the field.
• ex-03 – Suppress the browser's validation pop-up.
• ex-04 – Add onChange handler to hide the displayed validation message when field is fixed.
• ex-05 – Add custom validation pattern with explanation to demonstrate mixed locale (Firefox only).

Local setup

1. Run npm i
2. Start development server with npm start
3. Visit http://localhost:3000