React form validation component.
npm install react-valid-form-component
$ npm install react-valid-form-component
`
#### Usage
Live Demo 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
`jsx
// App.js
import React from 'react';
import ValidForm from 'react-valid-form-component'
function App() {
return (
type="text"
name="validation"
id="validation"
/ validation rules /
required
minLength="3"
maxLength="50"
/>
type="email" / validation with type /
name="validation"
id="validation"
/>
)
}
export default App;
`
##### Manual Fetch Example
Once the form is validated, you can send the data manually.
> Fetch Example 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)}>
type="text"
name="validation"
id="validation"
/ validation rules /
required
minLength="3"
maxLength="50"
/>
type="email" / validation with type /
name="validation"
id="validation"
/>
)
}
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 component.
`jsx
name="reactSelect"
inputId="reactSelect"
className="react-select-valid"
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]}
/>
``