react-superform

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 <form> 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!

import Superform from "react-superform";

class MyForm extends Superform {
  onSuccessSubmit(data) {
    console.log(data);
  }

  onErrorSubmit(errors, data) {}

  render() {
    return (
      <form noValidate onSubmit={ this.handleSubmit.bind(this) }>
        <input
          type="email" // validate email
          ref="email"  // ref is required to read the attributes
          name="email" // name field
          value={ this.getValueOf("email") }
          onChange={ this.handleChange.bind(this) }
          required     // field is required
        />
        <p className="error">{ this.getErrorMessageOf("email") }</p>
        <input type="submit" />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById("root"));

Working example

That's it, you are ready to go!

Examples

• Bootstrap 3: Sign Up Form
• Zurb Foundation 4: Sign Up Form

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="<other field name>" check whether field is the same as other field.

Example

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="<custom messages>" allows to define custom messages. It accepts JSON object with keys corresponding to failed rules.

Example

Contributors

• Super logo author: Marcin Michalak
• Main Maintainer: Michal Zalecki

Superform

Superform's Superclass

Kind: global class

• Superform
  • .onSuccessSubmit(data)
  • .onErrorSubmit(errors, data)
  • .handleChange(event) ⇒ Promise
  • .handleSubmit(event) ⇒ Promise
  • .markAsSubmitted() ⇒ Promise
  • .isSubmited() ⇒ boolean
  • .getValueOf(name) ⇒ string | boolean | undefined
  • .linkStateOf(name) ⇒ Object
  • .getData() ⇒ Object
  • .getErrors() ⇒ Object
  • .getErrorsOf(name) ⇒ Array
  • .isFormValid() ⇒ boolean
  • .isFieldValid(name) ⇒ boolean
  • .getErrorMessageOf(name) ⇒ string

superform.onSuccessSubmit(data)

Called on form success submission.

Kind: instance method of Superform

| Param | Type | Description | | --- | --- | --- | | data | Object | Form data with all fields valid |

superform.onErrorSubmit(errors, data)

Called on form failure submission.

Kind: instance method of Superform

| Param | Type | Description | | --- | --- | --- | | errors | Object | Form errors object | | data | Object | Form data |

superform.handleChange(event) ⇒ Promise

Handler for input change called internally.

Kind: instance method of Superform
Returns: Promise - Promise resolved when data and errors are set if any

| Param | | --- | | event |

superform.handleSubmit(event) ⇒ Promise

Handler for form submission. Your form should call it as onSubmit handler.

Kind: instance method of Superform
Returns: Promise - Promise resolved with onSuccessSubmit or onErrorSubmit result

| Param | | --- | | event |

superform.markAsSubmitted() ⇒ Promise

Marks form as submitted by setting this.status.submitted to true.

Kind: instance method of Superform
Returns: Promise - Promise resolved after state is set.

superform.isSubmited() ⇒ boolean

Determines whether form was submitted.

Kind: instance method of Superform

superform.getValueOf(name) ⇒ string | boolean | undefined

Returns value of specified field.

Kind: instance method of Superform
Returns: string | boolean | undefined - Field value

| Param | Type | Description | | --- | --- | --- | | name | string | Field name |

superform.linkStateOf(name) ⇒ Object

Links field value with form state. Simulates two way data binding.

Kind: instance method of Superform

| Param | Type | Description | | --- | --- | --- | | name | string | Field name |

superform.getData() ⇒ Object

Returns form data.

Kind: instance method of Superform
Returns: Object - Form data which is this.state.data

superform.getErrors() ⇒ Object

Returns form errors.

Kind: instance method of Superform
Returns: Object - Form data which is this.state.errors

superform.getErrorsOf(name) ⇒ Array

Returns errors of specified field.

Kind: instance method of Superform

| Param | Type | Description | | --- | --- | --- | | name | string | Field name |

superform.isFormValid() ⇒ boolean

Determines whether form is valid or not based on form errors.

Kind: instance method of Superform

superform.isFieldValid(name) ⇒ boolean

Determines whether field is valid or not based on form errors.

Kind: instance method of Superform

| Param | Type | Description | | --- | --- | --- | | name | string | Field name |

superform.getErrorMessageOf(name) ⇒ string

Returns final error message for particular field

Kind: instance method of Superform
Returns: string - Error message for the field

| Param | Type | Description | | --- | --- | --- | | name | string | Field name |