React simple form validator

!TypeScript

React simple form validator is a simple library to validate your form fields with React JS or React native.
The library is easy to use and is written with typescript.

The library exposes a useValidation hook or a ValidationComponent for class based component.

You can view a demo HERE.

1. Installation

* Run the following commands :
``sh

with npm

npm install react-simple-form-validator --save

or with yarn

yarn add react-simple-form-validator
`

2. Use it in your app

$3

You will use useValidation hook inside your component like this :

`js
import { useValidation } from 'react-simple-form-validator';

const MyFunction = () => {
const [email, setEmail] = useState('');
const [name, setName] = useState('');

const { isFieldInError, getErrorsInField, isFormValid } = useValidation({
fieldsRules: {
email: { email: true },
name: { required: true }
},
state: { email, name }
});

return (



id="email"
type="text"
onChange={(e) => setEmail(e.target.value)}
value={email}
/>
id="name"
type="text"
onChange={(e) => setName(e.target.value)}
value={name}
/>

);
}


`
You need to pass the form field state to the useValidation hook in the state propery like above.

You can also pass custom messages, labels, rules, locale (check the documentation below).

The description of the object returned by the hook is :

|Function / Variable|Output|Benefits|
|-------|--------|--------|
|isFormValid|boolean|This variable indicates if the form is valid and if there are no errors.|
|isFieldInError(fieldName: string)|boolean|This function indicates if a specific field has an error. The field name will match with your form state|
|getErrorMessages(separator: string, separator = '\n')|string|This method returns the different error messages bound to your form state. The argument is optional, by default the separator is a \n. Under the hood a join method is used.|
|getErrorsInField(fieldName: string)|string[]|This method returns the error messages bound to the specified field. The field name will match with your form state. It returns an empty array if no error was bound to the field.|
|getErrorsForField(fieldName: string)|Errors|This method returns an Errors object containing 3 properties : fieldName: string, failedRules: string[], and messages: string[].|
|getFailedRules()|{[fieldName: string]: string[]}|This methods returns the failed rules of your form state|
|getFailedRulesInField(fieldName: string)|string[]|This method returns the failed rules bound to a specific field name.|


$3

Extend "ValidationComponent" class on a your component :
`js
import React from 'react';
import ValidationComponent from 'react-simple-form-validator';

export default class MyForm extends ValidationComponent {
...
}
`
The ValidationComponent extends the React.Component class.

To ensure form validation you have to call the validate method in a custom component (herited from ValidationComponent)
`js
class ClassForm extends ValidationComponent {
constructor(props) {
super(props);

this.fieldRules = {
email: { email: true },
name: { required: true }
};

this.state = {
email: '',
name: ''
};
}

render() {
return (



id="email"
type="email"
onChange={(e) => this.validate({ email: e.target.value, fieldRules: this.fieldRules })}
value={this.state.email}
placeholder="Seize an email"
/>
id="name"
type="text"
onChange={(e) => this.validate({ name: e.target.value, fieldRules: this.fieldRules })}
value={this.state.name}
placeholder="Seize a name"
/>
Submit

);
}


`
The validate method takes as first argument the new state to validate. For instance if you have to validate an email, pass the email value.

The second argument is your field rules validation. You can omit this argument if you set the validation prop in your component.

Once you have extended ValidationComponent your class component can use one of the below methods :

|Method / Member|Output|Benefits|
|-------|--------|--------|
|this.validate(newState, fieldRules?)|void|This method ensures form validation within the object passed in argument. First argument is the new state to validate. Second argument is your field rules validation|
|this.isFormValid|boolean|This member indicates if the form is valid and if there are no errors.|
|this.isFieldInError(fieldName: string)|boolean|This method indicates if a specific field has an error. The field name will match with your React state|
|this.getErrorMessages(separator: string, separator = '\n')|string|This method returns the different error messages bound to your React state. The argument is optional, by default the separator is a \n. Under the hood a join method is used.|
|this.getErrorsInField(fieldName: string)|string[]|This method returns the error messages bound to the specified field. The field name will match with your React state. It returns an empty array if no error was bound to the field.|
|this.getErrorsForField(fieldName: string)|Errors|This method returns an Errors object containing 3 properties : fieldName: string, failedRules: string[], and messages: string[].|
|this.getFailedRules()|{[fieldName: string]: string[]}|This methods returns the failed rules of your form state|
|this.getFailedRulesInField(fieldName: string)|string[]|This method returns the failed rules bound to a specific field name.|

$3

You will find bellow the default rules available in the library defaultRules.ts :

|Rule|Benefits|
|-------|--------|
|numbers|Check if a state variable is a number.|
|email|Check if a state variable is an email.|
|required|Check if a state variable is not empty.|
|date|Check if a state variable respects the date pattern. Ex: date: 'YYYY-MM-DD'|
|minlength|Check if a state variable is greater than minlength.|
|maxlength|Check if a state variable is lower than maxlength.|
|equalPassword|Check if a state variable is equal to another value (useful for password confirm).|
|hasNumber|Check if a state variable contains a number.|
|hasUpperCase|Check if a state variable contains a upper case letter.|
|hasLowerCase|Check if a state variable contains a lower case letter.|
|hasSpecialCharacter|Check if a state variable contains a special character.|

You can also extend these rules with your own custom rules :

* For function component :

`js
import { defaultRules } from 'react-simple-form-validator';

// extend default rules with my custom any rule
const customRules = { ...defaultRules, any: /^(.*)$/ };

const { isFieldInError, getErrorsInField, isFormValid } = useValidation({
fieldRules: {
email: { email: true },
name: { required: true }
},
state: { firstName, lastName, email, civility },
rules: customRules
});
`

* For class component :

`js
import { defaultRules } from 'react-simple-form-validator';

// extend default rules with my custom any rule
const customRules = { ...defaultRules, any: /^(.*)$/ };

// Or override the custom rules into the super class child constructor

// FormTest.js
class FormTest extends ValidationComponent {
constructor(props) {
super({...props, rules: { ...defaultRules, any: /^(.*)$/ }});

this.fieldRules = {
email: { email: true },
name: { required: true }
};
}
}
`

$3

The library also contains a defaultMessages.ts file which includes the errors label for a language locale.

* For function component :

`js
import { defaultMessages } from 'react-simple-form-validator';

const { isFieldInError, getErrorsInField, isFormValid } = useValidation({
fieldRules: {
email: { email: true },
name: { required: true }
},
state: { email, name },
messages: {
en: {...defaultMessages.en, numbers: "error on numbers !"},
fr: {...defaultMessages.fr,numbers: "erreur sur les nombres !"}
}
});
`

* For class component :

You can override the messages component React props :
`js
import { defaultMessages } from 'react-simple-form-validator';

const messages = {
en: {...defaultMessages.en, numbers: "error on numbers !"},
fr: {...defaultMessages.fr,numbers: "erreur sur les nombres !"}
};


`

$3

You can add custom labels, which will be useful if you want to change the error messages label or translate it to the local language :

* For function component :

`js
import { defaultMessages } from 'react-simple-form-validator';

const { isFieldInError, getErrorsInField, isFormValid } = useValidation({
fieldRules: {
email: { email: true },
name: { required: true }
},
state: { email, name },
labels: {
name: 'Name',
email: 'E-mail',
number: 'Phone number'
}
});
`

* For class component :

`js
const labels = {
name: 'Name',
email: 'E-mail',
number: 'Phone number'
};

// Or override the custom labels into the super class child constructor

// FormTest.js
class FormTest extends ValidationComponent {
constructor(props) {
const labels = {
name: 'Name',
email: 'E-mail',
number: 'Phone number'
};
super({...props, labels});

this.fieldRules = {
email: { email: true },
name: { required: true }
};
}
}
`

$3

You can specify the default custom local language :

* For function component :

`js
const { isFieldInError, getErrorsInField, isFormValid } = useValidation({
fieldRules: {
email: { email: true },
name: { required: true }
},
state: { email, name },
locale: 'fr'
});
`

* For class component :

`js


// Or override the custom locale into the super class child constructor

// FormTest.js
class FormTest extends ValidationComponent {
constructor(props) {
super({...props, locale: 'fr'});

this.fieldRules = {
email: { email: true },
name: { required: true }
};
}
}
`

3. Complete example

You can find a concrete Functional component example on FunctionForm.tsx (Typescript) :


$3

`ts
import React, { Fragment, FunctionComponent, useState } from 'react';
import { defaultMessages, defaultRules, FieldsToValidate, useValidation } from 'react-simple-form-validator';

interface FunctionFormProps {
validation: FieldsToValidate;
}

const FunctionForm: FunctionComponent = (props) => {
const [touchedFields, setTouchedFields] = useState({
civility: false,
email: false,
firstName: false,
lastName: false
});
const [email, setEmail] = useState('');
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [civility, setCivility] = useState('');

const { isFieldInError, getErrorsInField, isFormValid } = useValidation({
fieldsRules: props.validation,
state: { firstName, lastName, email, civility },
rules: { ...defaultRules, customCivilityRule: /^(Mrs|Ms|Miss)$/ },
messages: {
...defaultMessages,
en: { ...defaultMessages['en'], customCivilityRule: 'Civility is incorrect (Mrs/Ms/Miss)' }
}
});

const onBlurHandler = (event: React.FormEvent, field: string) =>
setTouchedFields((prevFields) => ({ ...prevFields, [field]: true }));

const formSubmitHandler = (event: React.FormEvent) => {
event.preventDefault();
console.log('Form values : ', civility, email, firstName, lastName);
setFirstName('');
setLastName('');
setEmail('');
setCivility('');
setTouchedFields({ firstName: false, lastName: false, email: false, civility: false });
};

return (



Functional Form

Civility
id="civility"
type="text"
onChange={(e) => setCivility(e.target.value)}
onBlur={(e) => onBlurHandler(e, 'civility')}
value={civility}
placeholder="Seize a civility (Mrs or Ms or Miss)"
/>

{touchedFields.civility && isFieldInError('civility') && getErrorsInField('civility').join('\n')}

Email
id="email"
type="email"
onChange={(e) => setEmail(e.target.value)}
onBlur={(e) => onBlurHandler(e, 'email')}
value={email}
placeholder="Seize an email"
/>

{touchedFields.email && isFieldInError('email') && getErrorsInField('email').join('\n')}

First name
id="firstName"
type="text"
onChange={(e) => setFirstName(e.target.value)}
onBlur={(e) => onBlurHandler(e, 'firstName')}
value={firstName}
placeholder="Seize a first name"
/>

{touchedFields.firstName && isFieldInError('firstName') && getErrorsInField('firstName').join('\n')}

Last Name
id="lastName"
type="text"
onChange={(e) => setLastName(e.target.value)}
onBlur={(e) => onBlurHandler(e, 'lastName')}
value={lastName}
placeholder="Seize a last name"
/>

{touchedFields.lastName && isFieldInError('lastName') && getErrorsInField('lastName').join('\n')}

Submit

);
};

export default FunctionForm;
`


$3

You can find a concrete Class component example on ClassForm.tsx (Typescript) :
`ts
import ValidationComponent, { ClassValidationProps, FormState } from 'react-simple-form-validator';
import { Fragment } from 'react';

class ClassForm extends ValidationComponent {
constructor(props: ClassValidationProps) {
super(props);

this.state = {
civility: '',
email: '',
firstName: '',
lastName: '',
touchedFields: { civility: false, firstName: false, lastName: false, email: false }
};
}

onBlurHandler(event: React.FormEvent, field: string): void {
this.setState({ touchedFields: { ...this.state.touchedFields, [field]: true } });
}

formSubmitHandler(event: React.FormEvent) {
event.preventDefault();

const { civility, email, firstName, lastName } = this.state;

console.log('Form Values : ', civility, email, firstName, lastName);

this.setState({
civility: '',
email: '',
firstName: '',
lastName: '',
touchedFields: { civility: false, firstName: false, lastName: false, email: false }
});
}

render(): JSX.Element {
return (



Class based Form

Civility
id="civility"
type="text"
onChange={(e) => this.validate({ civility: e.target.value })}
onBlur={(e) => this.onBlurHandler(e, 'civility')}
value={this.state.civility}
placeholder="Seize a civility (Mrs or Ms or Miss)"
/>

{this.state.touchedFields.civility &&
this.isFieldInError('civility') &&
this.getErrorsInField('civility').join('\n')}

Email
id="email"
type="email"
onChange={(e) => this.validate({ email: e.target.value })}
onBlur={(e) => this.onBlurHandler(e, 'email')}
value={this.state.email}
placeholder="Seize an email"
/>

{this.state.touchedFields.email &&
this.isFieldInError('email') &&
this.getErrorsInField('email').join('\n')}

First name
id="firstName"
type="text"
onChange={(e) => this.validate({ firstName: e.target.value })}
onBlur={(e) => this.onBlurHandler(e, 'firstName')}
value={this.state.firstName}
placeholder="Seize a first name"
/>

{this.state.touchedFields.firstName &&
this.isFieldInError('firstName') &&
this.getErrorsInField('firstName').join('\n')}

Last Name
id="lastName"
type="text"
onChange={(e) => this.validate({ lastName: e.target.value })}
onBlur={(e) => this.onBlurHandler(e, 'lastName')}
value={this.state.lastName}
placeholder="Seize a last name"
/>

{this.state.touchedFields.lastName &&
this.isFieldInError('lastName') &&
this.getErrorsInField('lastName').join('\n')}

Submit

);
}
}

export default ClassForm;

`

4. How to contribute

If you want to contribute to this project and make it better, your help is very welcome. Contributing is also a great way to learn more about social coding on Github, new technologies and and their ecosystems and how to make constructive, helpful bug reports, feature requests and the noblest of all contributions: a good, clean pull request.

$3

1. Create a personal fork of the project on Github.
2. Clone the fork on your local machine.
3. Implement/fix your feature, comment your code.
4. Follow the code style of this project, including indentation.
5. Write or adapt tests as needed.
6. Add or change the documentation as needed.
7. Squash your commits into a single commit with git's interactive rebase. Create a new branch if necessary.
8. Push your branch to your fork on Github, the remote origin.
9. From your fork open a pull request in the correct branch. Target the project's master branch.

$3

Run this command to install the library dependencies :

`sh
npm install
`

Build the library :
`sh
npm run build
`

Launch tests :
`sh


single run

npm run test

watch mode

npm run test:watch
`

Run the React JS example project :

`sh
cd examples/react-js && yarn install
`

Start the example project :
`
yarn start
`

* If you modify the library don't forget to re-run npm run build` to apply modifications into the example project.