https://github.com/michalzalecki/react-superform

Form with superpowers for ReactJS
https://github.com/michalzalecki/react-superform

Last synced: 3 months ago
JSON representation

Form with superpowers for ReactJS

• Host: GitHub
• URL: https://github.com/michalzalecki/react-superform
• Owner: MichalZalecki
• Created: 2016-02-20T21:39:37.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-04-10T07:02:55.000Z (almost 9 years ago)
• Last Synced: 2024-10-04T22:19:04.760Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 93.8 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.hbs

Awesome Lists containing this project

README

        
# react-superform

[![Build Status](https://travis-ci.org/MichalZalecki/react-superform.svg?branch=master)](https://travis-ci.org/MichalZalecki/react-superform)

![react-superform](http://i.imgur.com/Br7NDBx.png)

Form with superpowers for ReactJS

Tired of writing validation yourself? Tired of implementing custom elements for inputs when you already know HTML5 forms? **React Superform to the rescue!**

## Installation

```

npm i -S react-superform

```

## Getting Started

React Superform lets you create validatable `` with HTML5 form elements regardless of HTML5 validation support. Create your component and extend `Superform` class instead of `React.Component` use inherited methods to make your form awesome and user friendly!

```javascript

import Superform from "react-superform";

class MyForm extends Superform {

  onSuccessSubmit(data) {

    console.log(data);

  }

  onErrorSubmit(errors, data) {}

  render() {

    return (

      

        

        
{ this.getErrorMessageOf("email") }

        

      

    );

  }

}


ReactDOM.render(, document.getElementById("root"));

```

[Working example](https://jsfiddle.net/MichalZalecki/gh3L24h6/)

**That's it, you are ready to go!**

## Examples

* [Bootstrap 3: Sign Up Form](https://jsfiddle.net/MichalZalecki/kabaLLtn/)

* [Zurb Foundation 4: Sign Up Form](https://jsfiddle.net/MichalZalecki/vtmLa2e4/)

You can also check `examples` dir.

## Available HTML5 validation methods

* `max`

* `maxLength`

* `min`

* `minLength`

* `pattern`

* `required`

* `type="email"`

* `type="number"`

* `type="url"`

## Available custom validation methods

### Equality

`data-equals=""` check whether field is the same as *other field*.

[Example](https://github.com/MichalZalecki/react-superform/blob/master/examples/signup-bootstrap.html#L86)

**Warning:** Avoid deep circular equality check. `A -> B -> A` will end up with exception but `A -> B -> C -> A` can freeze the tab.

## Custom messages

`data-messages=""` allows to define custom messages. It accepts JSON object with keys corresponding to failed rules.

[Example](https://github.com/MichalZalecki/react-superform/blob/master/examples/signup-bootstrap.html#L87-L89)

## Contributors

* Super logo author: [Marcin Michalak](https://www.behance.net/marcinmichalak)

* Main Maintainer: [Michal Zalecki](http://michalzalecki.com/)

{{#class name="Superform"~}}

{{>header~}}

{{>body~}}

{{>member-index~}}

{{>members~}}

{{/class}}