Registry /
web-framework / react-validate-framework
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.
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
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.
import formConnect from 'react-validate-framework';
Text is a named export for a pre-built input component. Ensure it's imported using named import syntax.
import { Text } from 'react-validate-framework';
Message is a named export for displaying validation feedback. Other form components (Checkbox, Radio, Select, Textarea) are imported similarly.
import { Message } from 'react-validate-framework';
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>
);
}
}
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.
Agent activity
0 hits · last 30 days
No traffic data recorded yet.