{"id":15221,"library":"react-validate-framework","title":"React Validate Framework","description":"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.","status":"abandoned","version":"0.15.6","language":"javascript","source_language":"en","source_url":"https://github.com/MinJieLiu/react-validate-framework","tags":["javascript","react-form","react-validation","react-validate","react-validate-framework"],"install":[{"cmd":"npm install react-validate-framework","lang":"bash","label":"npm"},{"cmd":"yarn add react-validate-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-validate-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library for UI components. Requires React 15.x or 16.x, incompatible with 17+.","package":"react","optional":false},{"reason":"React DOM rendering utilities. Requires React DOM 15.x or 16.x, incompatible with 17+.","package":"react-dom","optional":false}],"imports":[{"note":"This is the default export, primarily used as a decorator (`@formConnect`). While technically CommonJS `require()` might work with transpilation, modern React setups predominantly use ESM imports.","wrong":"const formConnect = require('react-validate-framework');","symbol":"formConnect","correct":"import formConnect from 'react-validate-framework';"},{"note":"Text is a named export for a pre-built input component. Ensure it's imported using named import syntax.","wrong":"import Text from 'react-validate-framework';","symbol":"Text","correct":"import { Text } from 'react-validate-framework';"},{"note":"Message is a named export for displaying validation feedback. Other form components (Checkbox, Radio, Select, Textarea) are imported similarly.","wrong":"import * as Messages from 'react-validate-framework';","symbol":"Message","correct":"import { Message } from 'react-validate-framework';"}],"quickstart":{"code":"import React from 'react';\nimport PropTypes from 'prop-types';\nimport formConnect, { Text, Message } from 'react-validate-framework';\n\n// Note: This project is abandoned and requires React 15/16 and Babel decorator setup.\n// npm install react-validate-framework react@16 react-dom@16 prop-types --save\n// npm install @babel/plugin-proposal-decorators --save-dev\n// Ensure your Babel config (e.g., .babelrc) includes:\n// {\"plugins\": [[\"@babel/plugin-proposal-decorators\", { \"legacy\": true }]]}\n\nconst schemas = {\n  email: {\n    rules: 'required | isEmail | maxLength(32)',\n    messages: 'Can not be empty! | Please enter a valid email address. | Can not exceed {{param}} characters.',\n  },\n  password: {\n    rules: 'required | minLength(6)',\n    messages: 'Password is required! | Must be at least {{param}} characters.',\n  },\n};\n\nconst methods = {\n  // Custom methods for rules can be defined here if needed, e.g., async validation.\n  // async validateFromServer(field, param) { /* ... */ }\n};\n\n@formConnect(schemas, methods)\nexport default class BasicForm extends React.Component {\n  static propTypes = {\n    formControl: PropTypes.object,\n  };\n\n  constructor(props) {\n    super(props);\n    props.formControl.init({\n      email: '',\n      password: '',\n    }, {\n      static: 'form-control',\n      success: 'valid-success',\n      error: 'valid-error',\n    });\n  }\n\n  handleSubmit = async () => {\n    const { formControl } = this.props;\n    if (await formControl.validate()) {\n      console.log('Form is valid. Submitting values:', formControl.formValues);\n      // Implement your form submission logic here\n    } else {\n      console.log('Form has validation errors.');\n    }\n  };\n\n  render() {\n    return (\n      <div className=\"form-group\">\n        <label htmlFor=\"email\">Email:</label>\n        <Text\n          name=\"email\"\n          id=\"email\"\n          placeholder=\"Please input your email\"\n          delay={100} // Debounce for asynchronous validation\n        />\n        <Message className=\"valid-error-message\" name=\"email\" />\n\n        <label htmlFor=\"password\">Password:</label>\n        <Text\n          name=\"password\"\n          id=\"password\"\n          type=\"password\"\n          placeholder=\"Please input your password\"\n        />\n        <Message className=\"valid-error-message\" name=\"password\" />\n\n        <button onClick={this.handleSubmit}>Submit</button>\n      </div>\n    );\n  }\n}","lang":"javascript","description":"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."},"warnings":[{"fix":"Consider migrating to a modern, actively maintained React form validation library. If legacy support is critical, you must use React 15 or 16 and not upgrade beyond.","message":"This package is incompatible with React versions 17 and 18+. It explicitly lists peer dependencies for React 15.x || 16.x, and relies on older React internal mechanisms and deprecated `ReactDOM.render` API patterns which were replaced by `createRoot` in React 18.","severity":"breaking","affected_versions":">=0.15.6"},{"fix":"Avoid using this library for new projects. For existing projects, plan for migration to a currently maintained solution to ensure long-term stability and security.","message":"The project is abandoned. The last release was approximately 8 years ago, and there are no signs of ongoing maintenance, bug fixes, security patches, or compatibility updates for newer React versions or JavaScript features.","severity":"gotcha","affected_versions":">=0.15.6"},{"fix":"Ensure components accessing form context are updated to use the `formControl` property injected by the `@formConnect` decorator, as demonstrated in the README examples.","message":"Version 0.13.0 introduced a breaking change by altering the internal `contextTypes` mechanism to `formControl`. This impacts how form context is accessed and managed within components, requiring updates to any custom components or higher-order components that directly interacted with the form's context.","severity":"breaking","affected_versions":">=0.13.0"},{"fix":"Configure your Babel setup (e.g., in `.babelrc` or `babel.config.js`) to include the `plugin-proposal-decorators` with the `legacy` option. For Create React App, consider using `react-app-rewired` or ejecting.","message":"The `@formConnect` decorator syntax requires explicit Babel configuration with `@babel/plugin-proposal-decorators` (and often `{ \"legacy\": true }`). This is not enabled by default in Create React App or other modern build setups without custom tooling like `react-app-rewired`.","severity":"gotcha","affected_versions":"*"},{"fix":"No direct fix for this library's internals. This is another reason to consider migrating to a modern library that uses current React patterns.","message":"The use of `contextTypes` for passing information down the component tree is a legacy React API that has been largely deprecated in favor of the Context API (`React.createContext`). While this library abstracts it, its underlying implementation uses outdated patterns.","severity":"deprecated","affected_versions":">=0.13.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Verify that your Babel configuration correctly includes `@babel/plugin-proposal-decorators` (with `legacy: true`) and that the component decorated with `@formConnect` is part of a rendered tree.","cause":"The `@formConnect` decorator either failed to apply, or the component is not receiving `formControl` via props as expected. This can happen if Babel is not configured correctly for decorators, or if the component is mounted outside the context of `formConnect`.","error":"TypeError: Cannot read properties of undefined (reading 'formControl')"},{"fix":"Install `@babel/plugin-proposal-decorators` and add it to your Babel configuration (e.g., `.babelrc`) with `{ \"legacy\": true }`. Ensure the plugin order is correct if you have other plugins like `class-properties`.","cause":"Your Babel configuration does not include the necessary plugin to parse legacy decorator syntax, or it's misconfigured.","error":"Support for the experimental syntax 'decorators-legacy' isn't currently enabled"},{"fix":"Downgrade your React and React DOM versions to 16.x (e.g., `npm install react@16 react-dom@16 prop-types@15`). Or, if you need React 18, replace this library with a modern alternative.","cause":"Attempting to use this library with React 18+. The library's core design and peer dependencies are tied to React 15/16, which used `ReactDOM.render` for root creation.","error":"Error: ReactDOM.render is no longer supported in React 18. Use createRoot instead."},{"fix":"Install `regenerator-runtime` (`npm install regenerator-runtime`) and import it at the entry point of your application (`import 'regenerator-runtime/runtime';`) or configure Babel to include the necessary polyfills via `@babel/preset-env`.","cause":"Asynchronous validation methods (`async/await`) are used, but your JavaScript environment or Babel setup does not include the `regenerator-runtime` polyfill.","error":"ReferenceError: regeneratorRuntime is not defined"}],"ecosystem":"npm"}