https://github.com/barisates/react-valid-form
React form validation component.
https://github.com/barisates/react-valid-form
form form-validation form-validation-react form-validator input-validation react react-component reactjs validation validator
Last synced: 18 days ago
JSON representation
React form validation component.
- Host: GitHub
- URL: https://github.com/barisates/react-valid-form
- Owner: barisates
- License: mit
- Created: 2019-09-18T19:16:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T15:39:01.000Z (about 2 years ago)
- Last Synced: 2024-04-26T12:48:20.317Z (about 1 year ago)
- Topics: form, form-validation, form-validation-react, form-validator, input-validation, react, react-component, reactjs, validation, validator
- Language: JavaScript
- Homepage: https://barisates.github.io/react-valid-form/
- Size: 4.49 MB
- Stars: 8
- Watchers: 2
- Forks: 5
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-valid-form
React form validation component.
[![npm package][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Dependencies Status][david-image]][david-url]
[![Package Size][bundlephobia-image]][bundlephobia-url]
## Getting started
#### Install with NPM:
```
$ npm install react-valid-form-component
```
#### Usage
**Live Demo [CodeSandbox](https://codesandbox.io/s/react-valid-form-9fkx7 "CodeSandbox")**
With this component, you can validate form fields according to the rules you specify. Simply define your form in the `````` tags to validate.
Component supports standard form elements;
```html
```
##### Example
When the form is validated, it is automatically posted. You can manually Submit or Fetch using ```nosubmit``` prop.
You can follow the details about the form with ```onSubmit={(form, data, valid)}``` event.
> Auto Submit Example [CodeSandbox](https://codesandbox.io/s/auto-submit-example-9zdpi "CodeSandbox")
```jsx
// App.js
import React from 'react';
import ValidForm from 'react-valid-form-component'
function App() {
return (
Text Example:
Email Example:
Send Form
)
}
export default App;
```
##### Manual Fetch Example
Once the form is validated, you can send the data manually.
> Fetch Example [CodeSandbox](https://codesandbox.io/s/fetch-example-4kqoy "CodeSandbox")
```jsx
// App.js
import React from 'react';
import ValidForm from 'react-valid-form-component'
function App() {
const onSubmit = (form, data, valid) => {
const requestOptions = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
};
fetch("https://httpbin.org/post", requestOptions)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error(`Response Error, Status Code : ${response.status}`);
}
})
.then(json => {
console.log(json);
})
.catch(function (error) {
console.error(error);
});
}
return (
onSubmit(form, data, valid)}>
Text Example:
Email Example:
Send Form
)
}
export default App;
```
##### Props
```nosubmit``` Disable auto submit.
```novalid``` "onSubmit" event is also triggered when the form is not valid.
```data``` Default form elements value.
##### Events
```onSubmit={(form, data, valid)}``` When the form is submitted, it is triggered.
- ```form``` : Html form elemet.
- ```data``` : Form fields data.
- ```valid``` : Form is valid? (true/false)
##### Default Validation Rules
You can add rules and change warning texts. You can use rules by defining them as ```type=""``` or ```prop```. Follow the document for details.
- ```required="true"``` : Required field.
- ```number="true"``` : Only number field. Can be used as **Type**.
- ```alphanumeric="true"``` : Only alphanumeric character.
- ```letters="true"``` : Only letters.
- ```min="integer"``` : Min value limitations.
- ```max="integer"``` : Max value limitations.
- ```minlength="integer"``` : Min value length limitations.
- ```maxlength="integer"``` : Max value length limitations.
- ```email="true"``` : Only email field. Can be used as **Type**.
- ```url="true"``` : Only url field. Can be used as **Type**.
- ```confirm="Confirmation Field ID"``` : Verifies that the two fields have the same value. Such as the "Password Repeat" field.
- ```regexp="Regular Expression"```
##### Add Validation Rule
Import ```Rules``` and ```Warnings``` objects for add rule.
```jsx
import ValidForm, { Rules, Warnings } from 'react-valid-form';
// rule
Rules.customRule = (value) => {
return (value === "Custom Rule")
};
// warning alert
Warnings.customRule = (params) => `This field is custom rule ${params}.`
// using
```
##### React Select
To use required validation with [react-select](https://github.com/jedwatson/react-select "react-select") component.
```jsx
```
- Add **react-select-valid** to the component as **className** for validation.
- Fill in the component's **inputID** and **name** property.
- If you don't want to validate, set the **inputId** property to **no-validation**.
------------
#### Author
**Barış Ateş**
- http://barisates.com
- [github/barisates](https://github.com/barisates "github/barisates")
[npm-image]:https://img.shields.io/npm/v/react-valid-form-component.svg
[npm-url]:https://www.npmjs.com/package/react-valid-form-component
[travis-image]:https://travis-ci.org/barisates/react-valid-form.svg?branch=master
[travis-url]:https://travis-ci.org/barisates/react-valid-form
[david-image]:https://david-dm.org/barisates/react-valid-form.svg
[david-url]:https://david-dm.org/barisates/react-valid-form
[bundlephobia-image]:https://badgen.net/bundlephobia/minzip/react-valid-form-component
[bundlephobia-url]:https://bundlephobia.com/result?p=react-valid-form-component