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