https://github.com/mahmud-r-farhan/react-form-validator-pro
A React form validation package.
https://github.com/mahmud-r-farhan/react-form-validator-pro
forms javascript javascript-package npm npm-package npmjs react react-form-validator react-forms reactjs validator
Last synced: 2 months ago
JSON representation
A React form validation package.
- Host: GitHub
- URL: https://github.com/mahmud-r-farhan/react-form-validator-pro
- Owner: mahmud-r-farhan
- Created: 2025-01-27T18:11:27.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-27T19:06:23.000Z (4 months ago)
- Last Synced: 2025-02-28T05:55:24.258Z (3 months ago)
- Topics: forms, javascript, javascript-package, npm, npm-package, npmjs, react, react-form-validator, react-forms, reactjs, validator
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-form-validator-pro
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React Form Validator Pro
A lightweight React component for easy form validation and error handling. This package makes building forms with validation a breeze by providing a clean, declarative API.
---
## Features
- **Easy-to-use**: Quickly add form validation to your React project.
- **Customizable Rules**: Define required fields, patterns, and error messages.
- **No Page Reload**: Prevents page reloads on form submission.
- **Error Handling**: Display custom error messages for invalid fields.
---
## Installation
Install the package via npm:
```bash
npm install react-form-validator-pro
```
---
## Basic Usage
Here’s how you can use the package in your React project:
### Example
```javascript
import React from 'react';
import { FormValidator } from 'react-form-validator-pro';
const App = () => {
const handleSubmit = (formData) => {
console.log('Form submitted:', formData);
};
return (
React Form Validator Example
Username:
Email:
Phone:
Password:
Submit
);
};
export default App;
```
---
## Props
### **`FormValidator`**
| Prop | Type | Default | Description |
|------------|----------|---------|-----------------------------------------------------------------------------|
| `children` | `node` | Required| The form fields to validate. |
| `onSubmit` | `func` | Required| A callback function that receives the validated form data. |
| `rules` | `object` | `{}` | An object defining validation rules for each field. |
---
### Rules Format
Each field in the `rules` object should have the following format:
| Key | Type | Description |
|-----------|------------|------------------------------------------------------------|
| `required`| `boolean` | If `true`, the field must be filled. |
| `pattern` | `RegExp` | A regular expression to validate the input against. |
| `message` | `string` | Custom error message to display if the `pattern` check fails.|
---
## Customization
You can customize error messages by adding them to the `rules` object. For example:
```javascript
```
---
## Development
If you'd like to contribute:
1. Clone the repository:
```bash
git clone https://github.com/mahmud-r-farhan/react-form-validator-pro.git
```
2. Install dependencies:
```bash
npm install
```
3. Run tests:
```bash
npm test
```
4. Build the package:
```bash
npm run build
```
---
## License
This project is licensed under the MIT License.
---
## Feedback and Contributions
Feel free to open issues or submit pull requests! Feedback is always appreciated. 😊
Made with ❤️ by Mahmudur Rahman.
---