A react component for form inputs validation. Online demo examples.
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.4.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.4.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">
class App extends React.Component {
...
render() {
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)
Tested on IE9+ and Chrome and Safari(10.0.3)