React Forms Component
Form Component including validation for React
Table of Contents
Installation
To install just run the following command:
> npm install react-forms-component
Usage
Import Library
;;
Basic Component Usage
<ReactForm></ReactForm>
Optional Props
Paramater | Type | Remark |
---|---|---|
classNameError |
string | Will apply the className when an input field is not valid |
styleError |
object | Will apply these inline styles when an input field is not valid |
onValidationChange |
func | Will be fired when the overall form validation status changes |
Validations
List of build in Validations
Validation | Parameters |
---|---|
Required |
No extra parameters |
IsNumber |
No extra parameters |
MinLength |
Length size: Number |
MaxLength |
Length size: Number |
Min |
Length size: Number |
Max |
Length size: Number |
Sample
To following example is using 2 of the above built-in validation functions:
<input type="text" data-model="username" data-validations= ReactFormValidationsRequired ReactFormValidations />
Custom Validations
If the above built-in validations are not enough for your application, you can create your own Validation functions. Below is an example of a custom validation:
static value && <= no ? true : ReactFormValidations;
Display Errors
To display the error message inline you can need to use data-error-for
attribute/prop:
<div className="error-label" data-error-for="username"></div>
Example
The following is an example of how to use this library in your application:
Sample JSX
<ReactForm classNameError="error" onValidationChange=thishandleValidationChange ref= { thisform = form; }> <div className="form-control"> <div className="error-label" data-error-for="username"></div> <label>Username:</label> <input type="text" data-model="username" data-validations= ReactFormValidationsRequired ReactFormValidations /> </div> ...</ReactForm><div className="form-control"> <label></label> <button disabled=!isValid onClick=this_handleClick>Populate Model</button></div>
Sample Event Handler
{ this;} { console;}
Example
Clone this project and run the following commands to run the demo:
cd examplesnpm installnpm start
then open http://localhost:4001 in a web browser
Credits
React: http://facebook.github.io/react/
Babel: http://babeljs.io/
Webpack: https://webpack.github.io/docs/