A react component for form inputs validation. Online demo examples.
- How to use
- Live examples
- Documentation
- 1.x, 2.x, 3.x
- 4.x
- About intl locales support (Under
Common questions)
- Browser support
- Donation
- Contributors
npm install react-inputs-validation --saveimport { Textbox, Radiobox, Checkbox, Select, Textarea } from 'react-inputs-validation'; import 'react-inputs-validation/lib/react-inputs-validation.min.css'; "peerDependencies": { "react": ">= 16.8.6", "react-dom": ">= 16.8.6" }<head> ... <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-inputs-validation/4.9.1/react-inputs-validation.min.css"/> </head> <body> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-inputs-validation/4.9.1/react-inputs-validation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> <script type="text/babel"> const App = React.memo(() => { const [value, setValue] = React.useState(''); return (<Textbox value={value} onBlur={()=>{}} .../>) }); ReactDOM.render(<App />, document.getElementById('root')); </script> </body> - Example of online demo form playground
- Example of custom control(when
check: false) - Example of custom function(when providing
customFunc) - Example of custom function further control(when providing
customFunc) - Example of custom locales(when providing
window.REACT_INPUTS_VALIDATION['customErrorMessage']) - Example of phone and email validation(handled with
customFunc) - Example of async checking username existence (Async checking for
<Textbox>and<Textarea>only. Handled withcustomFunc) - Example of asyncMsgObj (when providing
asyncMsgObj) - Example of AREA CODE select (with
react-custom-flag-select) - Example of label animation
About intl locales support (Under Common questions)
Tested on IE9+ and Chrome and Safari(10.0.3)
Thanks for donating me a donut! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
Thanks goes to these wonderful people (emoji key):
 Edward Xiao 💻 📖 🚇 |  Frank Bonnet 💻 |  Rokas Anisas 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!