Validation library for React forms
npm install react-valid8> Validation library for React forms
 
``bash`
npm install --save react-valid8
or
`
yarn add react-valid8
react-valid8 follows a redux-form style way of validating forms. It provides a simple way of
displaying error messages by their rightful input fields. Just wrap your input fields in the Form
component, and give the field a property, and react-valid8 will automatically pick up the input
field and give the correct errors to the correct fields.
`jsx harmony
import React from "react";
import Form from "react-valid8";
class MyComponent extends React.Component {
handleSubmit = values => {
// Retrieves the values from the form so you can do whatever you like in your submit
};
validateValues = values => {
const errors = {};
if (!values.title) errors.title = "Title is required";
if (!values.description) errors.description = "Description is required";
if (!values.category) errors.category = "Category is required";
if (!values.amount) errors.amount = "Amount is required";
if (isNaN(values.amount)) errors.amount = "Amount must be a number";
return errors;
};
render() {
return (
submit={this.handleSubmit}
initialValues={{
title: "Very title",
category: "Option A",
amount: 12
}}
>
);
}
}
`
`typescript jsx
type IMap = {
[key: string]: any;
};
interface IProps {
validate: (values: IMap) => IMap; // custom function to provide error messages based on validation
//provides error messages to fields corresponding to kep value
submit: (values: IMap) => void; // custom function for handling submitting.
// Will be called when the form has no errors
initialValues?: IMap; // an object containing initial values of fields. (optional)
errorInputClassName?: string; // className to style the input field on error (optional)
errorClassName?: string; // className to style the error message field on error (optional)
formClassName?: string; // className to style the form (optional)
injectErrorsAsProps?: boolean;
}
`
Each child of the Form component that wants to register error messages needs to be decorated with thename prop. In addition to this, each component can add an optional injectErrorAsProps which is a boolean
that specifies whether the errors should be injected to the child component as props. This is set to
by default. When this is a span with the error message as content an the className
prop set to will be placed directly adjacent to the child component of Form.
When this value is true Form will not display the error message automatically, but rather pass it as a
prop to the child component.
The validation function will be injected with an object with some common validation functions, which can
be used to do validation on fields like urls.
`
type UtilFunctions = {
isUrl: (url: string) => boolean;
}
MIT © mikaelrss