https://github.com/xontab/react-forms-component

Form Component including validation for React
https://github.com/xontab/react-forms-component

boilerplate forms jsx react validation webpack

Last synced: about 1 month ago
JSON representation

Form Component including validation for React

• Host: GitHub
• URL: https://github.com/xontab/react-forms-component
• Owner: xontab
• License: mit
• Created: 2016-12-04T12:02:42.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-12T18:04:46.000Z (almost 8 years ago)
• Last Synced: 2024-10-13T07:08:09.329Z (3 months ago)
• Topics: boilerplate, forms, jsx, react, validation, webpack
• Language: JavaScript
• Homepage: http://xontab.com
• Size: 22.5 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Forms Component

[![npm version](https://badge.fury.io/js/react-forms-component.svg)](https://badge.fury.io/js/react-forms-component)

Form Component including validation for React

**Table of Contents**

- [Installation](#installation)

- [Usage](#usage)

- [Example](#example)

- [Credits](#credits)

## Installation

To install just run the following command:

    > npm install react-forms-component

## Usage

### Import Library

```js

import ReactForm from 'react-forms-component';

import ReactFormValidations from 'react-forms-component/validations';

```

### Basic Component Usage

```js

```

### 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:

```js

 ReactFormValidations.MinLength(m, v, 5)

        ]

    } />

```

### 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:

```js

static Max = (modelName, value, no, customError) => (value && parseInt(value) <= no ? true : ReactFormValidations._createErrorMessage(customError, modelName, `greater than ${no}`));

```

#### Display Errors

To display the error message inline you can need to use `data-error-for` attribute/prop:

```js



```


## Example

The following is an example of how to use this library in your application:

### Sample JSX

```js

 {

        this.form = form; 

    }}

>

    


        


        Username:

         ReactFormValidations.MinLength(m, v, 5)

                ]

            } />

    

    ...




    

    Populate Model



```


### Sample Event Handler

```js

handleValidationChange = (isValid) => {

    this.setState({

        isValid,

    });

}

_handleClick = () => {

    console.log(this.form.getModel());

}

```

## Example

Clone this project and run the following commands to run the demo:

```js

cd examples

npm install

npm 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/