A form input builder and validator for React JS
A form input builder and validator for React JS
This project has moved. Starting from 1.0.0 onward, develeopment will continue at https://github.com/formsy/formsy-react/
A form input builder and validator for React JS
How to use API ExamplesI wrote an article on forms and validation with React JS, Nailing that validation with React JS, the result of that was this extension.
The main concept is that forms, inputs and validation is done very differently across developers and projects. This extension to React JS aims to be that "sweet spot" between flexibility and reusability.
Build any kind of form element components. Not just traditional inputs, but anything you want and get that validation for free
Add validation rules and use them with simple syntax
Use handlers for different states of your form. Ex. "onSubmit", "onError", "onValid" etc.
Pass external errors to the form to invalidate elements
You can dynamically add form elements to your form and they will register/unregister to the form
You can look at examples in this repo or use the formsy-react-components project to use bootstrap with formsy-react, or use formsy-material-ui to use Material-UI with formsy-react.
npm install formsy-react and use with browserify etc.bower install formsy-reactSee examples folder for examples. Codepen demo.
Complete API reference is available here.
…
This code results in a form with a submit button that will run the submit method when the submit button is clicked with a valid email. The submit button is disabled as long as the input is empty (required) or the value is not an email (isEmail). On validation error it will show the message: "This is not a valid email".
…
The form element component is what gives the form validation functionality to whatever you want to put inside this wrapper. You do not have to use traditional inputs, it can be anything you want and the value of the form element can also be anything you want. As you can see it is very flexible, you just have a small API to help you identify the state of the component and set its value.
npm installnpm run examples runs the development server on localhost:8080npm test runs the testsCopyright (c) 2014-2016 PatientSky A/S
No open issues yet, or sync has not completed.