react-validate-framework

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> ); } }