0.3.0 • Published 6 years ago

react-simple-form-validation v0.3.0

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

React Simple Form Validation

A simple lightweight package to help with validating forms and displaying errors on inputs.

Installation

npm install --save react-simple-form-validation

or

yarn add react-simple-form-validation

How to use

The concept behind this library is that you can style and structure your form however you wish and you just wrap your inputs in Field tags. This will inject the onChange, value and errorMessage props into your input component.

import React, { Component } from 'react';
import { Form, Field } from 'react-simple-form-validation';

const renderTextInput = ({ onChange, errorMessage, value }) => (
  <div>
    <input
      type="text"
      onChange={event => onChange(event.target.value)}
      value={value}
    />
    <div>{errorMessage}</div>
  <div>
);

class MyForm extends Component {
  constructor() {
    super();
    this.state = {
      firstName: '',
      lastName: '',
      isValid: false,
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange({ firstName, lastName }, isValid) {
    this.setState({
      firstName,
      lastName,
      isValid,
    });
  }

  render() {
    return (
      <Form onChange={this.onChange} values={this.state.values}>
        <h1>Your details</h1>
        <div>
          <Field
            valueKey="firstName"
            getValidationError={(value) => value === '' ? 'First name is required' : ''}
            render={this.renderTextInput}
          />
          <div>
            <Field
              valueKey="lastName"
              getValidationError={(value) => value === '' ? 'Last name can not be blank' : ''}
              render={this.renderTextInput}
            />
          </div>
          <div>Please fill in your details</div>
        </div>
      </Form>
    );
  }
}

Components

Form

Wrap your fields in a Form component which handles the changing of values and validation of fields.

values: object

A key/value pair of values for the form. The keys should correspond to the fieldKey props passed to the Field components in the Form

onChange: (newValues: object, isValid: boolean) => any

A change handler which will be called when the form values change. It will be called the the object of new values and a boolean value stating whether the current values are valid.

children: Component

The children passed through can be in any format. They should contain Field components in order to make use of the Form.

showErrors?: boolean

A boolean value which determines whether the Form should pass the error messages through to the components.

Field

Wrap your input components in a field to let the Form know they need watching for changes and validation.

valueKey: string

This key should correspond to the key name on the values prop passed to the Form. The fieldKey should be unique otherwise the Form will throw an error.

getValidationError: (value: any) => string

A function which returns a validation error based on the current value of the Field. The Form assumes if this function returns the empty string then the Field is valid.

render: () => Component

The function takes an object with the following properties errorMessage: string, onChange: (newValue: T) => T and value: T and should return a renderable element.

Issues

Please log any issues to the issue tracker in GitHub [Issues].

Authors

Alexander Cheshire

0.3.0

6 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago