react-inputs-validation
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
How to use
Usage
By NPM
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';Make sure you have at least [email protected] installed.
"peerDependencies": {
"react": ">= 16.8.6",
"react-dom": ">= 16.8.6"
}By CDN (starting from v4.4.1)
<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>
Live examples
Codesandbox Examples
- 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
Basic Usage Examples
Documentation
1.x, 2.x, 3.x
4.x
About intl locales support (Under Common questions)
Browser support
Tested on IE9+ and Chrome and Safari(10.0.3)
Donation
Thanks for donating me a donut! ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
Contributors ✨
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!