React Validate Framework

0.15.6 · abandoned · verified Tue Apr 21

React Validate Framework is a lightweight form validation utility for React applications. It enables declaration of validation schemas and custom methods, supporting both synchronous and asynchronous validation. The library utilizes the decorator pattern via `@formConnect` to integrate validation logic into class components. It also provides a set of pre-built form components (Checkbox, Radio, Select, Text, Textarea, Message) that connect to the validation system, as well as an API for manual integration with unencapsulated components. The current stable version is 0.15.6, but the package has not been updated in approximately eight years, making it incompatible with modern React versions (17+) and development practices. Its core functionality relies on older React APIs and Babel features.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates a basic React class component utilizing the `@formConnect` decorator to enable form validation. It shows how to define validation `schemas` and integrate pre-built form components like `Text` and `Message` to display validation status and errors. The `handleSubmit` method triggers validation and logs form values if valid.

import React from 'react';
import PropTypes from 'prop-types';
import formConnect, { Text, Message } from 'react-validate-framework';

// Note: This project is abandoned and requires React 15/16 and Babel decorator setup.
// npm install react-validate-framework react@16 react-dom@16 prop-types --save
// npm install @babel/plugin-proposal-decorators --save-dev
// Ensure your Babel config (e.g., .babelrc) includes:
// {"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]}

const schemas = {
  email: {
    rules: 'required | isEmail | maxLength(32)',
    messages: 'Can not be empty! | Please enter a valid email address. | Can not exceed {{param}} characters.',
  },
  password: {
    rules: 'required | minLength(6)',
    messages: 'Password is required! | Must be at least {{param}} characters.',
  },
};

const methods = {
  // Custom methods for rules can be defined here if needed, e.g., async validation.
  // async validateFromServer(field, param) { /* ... */ }
};

@formConnect(schemas, methods)
export default class BasicForm extends React.Component {
  static propTypes = {
    formControl: PropTypes.object,
  };

  constructor(props) {
    super(props);
    props.formControl.init({
      email: '',
      password: '',
    }, {
      static: 'form-control',
      success: 'valid-success',
      error: 'valid-error',
    });
  }

  handleSubmit = async () => {
    const { formControl } = this.props;
    if (await formControl.validate()) {
      console.log('Form is valid. Submitting values:', formControl.formValues);
      // Implement your form submission logic here
    } else {
      console.log('Form has validation errors.');
    }
  };

  render() {
    return (
      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <Text
          name="email"
          id="email"
          placeholder="Please input your email"
          delay={100} // Debounce for asynchronous validation
        />
        <Message className="valid-error-message" name="email" />

        <label htmlFor="password">Password:</label>
        <Text
          name="password"
          id="password"
          type="password"
          placeholder="Please input your password"
        />
        <Message className="valid-error-message" name="password" />

        <button onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

view raw JSON →