# react-html5-validations

> This is a light weight module to handle form validations in ReactJs such easy as Angular.io . We can use this library with any other Javascript client framework or library. This module best suites for libraries which does not have in built form validation

Latest version **0.0.6** (published 2019-10-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-html5-validations
pnpm add react-html5-validations
yarn add react-html5-validations
bun add react-html5-validations
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2019-10-07 |
| First published | 2019-08-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Amar |
| Maintainers | amarm |
| Keywords | React, form, validations, react-html-validations, html, validations |

## Links

- npm: https://www.npmjs.com/package/react-html5-validations
- Repository: https://github.com/medaamarnadh/react-html5-validations
- Homepage: https://github.com/medaamarnadh/react-html5-validations#readme
- Issues: https://github.com/medaamarnadh/react-html5-validations/issues
- npm.io page: https://npm.io/package/react-html5-validations

## Recent versions

- 0.0.6 (latest) — 2019-10-07
- 0.0.5 — 2019-10-07
- 0.0.4 — 2019-08-12
- 0.0.3 — 2019-08-10
- 0.0.2 — 2019-08-10
- 0.0.1 — 2019-08-10

## README

# react-html5-validations
As we do not have in built form validations support in ReactJs, we need to have reusable light weight library to validate our forms in more flexible and customised way. I hope react-html5-validations package/module will fill the gap. This module does not include any other dependencies and development dependencies. This module was developed by using pure Javascript. 


# # How to use:

1. `npm install --save react-html5-validations`
2. Load this module as `import { checkFormValidation, checkElementValidation}`


## Reference

### checkFormValidation(<formObject>)
This is the method to validate a form.  We need to pass our form object into the above method then it will return result as an object which includes validation status of the form and validation status of each element in the form. The return result is 
``` 
{
	"valid": false,
	"validations": {
		"fullName": {
			"value": "",
			"validity": false,
			"longError": false,
			"shortError": false,
			"aboveRangeError": false,
			"rangeBelowError": false,
			"valid": false,
			"incorrectInput": false,
			"patternError": false,
			"customError": false,
			"requiredError": true
		},		  
		"email": {
			...
		}
	}
}
```
**valid** : true/ false. 
   true --> If the entire form is valid 
   false --> If the form is invalid 
 **validations** : This is a JSON object that contains validations of entire form. each key is the form element name. The value of each element contains same kind of validation object which is 
```
{
	"value": "",
	"validity": false,
	"longError": false,
	"shortError": false,
	"aboveRangeError": false,
	"rangeBelowError": false,
	"valid": false,
	"incorrectInput": false,
	"patternError": false,
	"customError": false,
	"requiredError": true
}
```
**value**: Value of the form element 
	
**validity**: true / false Tells us whether form element is valid or not 

**longError**:  true/ false. Set to true if the value exceeds the specified maxlength

**shortError**: true / false. Set to true if the value fails to meet the specified minlength

**aboveRangeError**: true/ false. Set to true, if an element's value is greater than its max attribute.

**rangeBelowError**: true/false. Set to true, if an element's value is less than its min attribute.

**incorrectInput**: true/false. is true if the user has provided input that the browser is unable to convert.

**patternError**: true/false. Set to true, if an element's value does not match its pattern attribute.

**customError**: true/false. Tell us whether the form element has custom error or not. We can get this error if you set a validtion message by using 
> **setCustomValidity** 

**stepMismatchError**: Set to true, if an element's value is invalid per its step attribute.

**typeError**: Set to true, if an element's value is invalid per its type attribute.

**requiredError**: Set to true, if an element's value is missing for required element in a form

The beauty of this module is we do not need to learn any validations mechanism other than html5 validations to define in our forms 
Note: We can use above method in form onSubmit event and  have to call `preventDefault` method of the event object.

### checkElementValidation(<ElementObject>)
This is the function to check an individual form element is valid or not. The result is 
```
{
	"value": "some value",
	"validity": true,
	"longError": false,
	"shortError": false,
	"aboveRangeError": false,
	"rangeBelowError": false,
	"valid": true,
	"incorrectInput": false,
	"patternError": false,
	"customError": false
}
```


## Example usage
```
	import  React, { Component } from  'react';
	import { Button, Form, FormGroup, Label, Input, Container } from  'reactstrap';
// We are loading react-html5-validations 
	import { checkElementValidation, checkFormValidation } from  'react-html5-validations';
	
	class  HomePage  extends  Component {
		constructor(props) {
			super(props)
			this.state  = {
				user: {
					name:  '',
					email:  ''
				},
				formValidations: {
				}
			}
			// Bind this
			this.handleFormSubmit  =  this.handleFormSubmit.bind(this)
			this.onChange  =  this.onChange.bind(this)
		}
		// This is the function to handle the form submit event
		
		handleFormSubmit(ev) {
			ev.preventDefault()
			let  formValidations  = checkFormValidation(ev.target)
			this.setState({
			formValidations:  formValidations.validations
			})
		}
		
		onChange (e) {
			let  formValidations  =  this.state.formValidations
			formValidations[e.target.name] = checkElementValidation(e.target)
			this.setState({
				formValidations
			});
		}

	render() {
		return (
			<Container>
			<div>
			<Form onSubmit={this.handleFormSubmit} noValidate>

			<FormGroup  className="signup-input-wrap">
				<Label  for="name"  className="input-label name-label">
					Full name
				</Label>
				
				<Input type="text" name="fullName" placeholder="Enter full name" onChange={this.onChange} className="input-field"	required  />
				
				{this.state.formValidations.fullName && !this.state.formValidations.fullName.requiredError ? (
				<span  className="error-msg">Please enter a valid full name</span>
				): ''}
			</FormGroup>
			
			<FormGroup  className="signup-input-wrap">
				<Label  for="exampleEmail"  className="input-label email-label">
					Email
				</Label>
				<Input type="email" name="email" onChange={this.onChange}	placeholder="Enter email ID" className="input-field" required/>
				{this.state.formValidations.email && !this.state.formValidations.email.requiredError ? (
				<span  className="error-msg">Please enter a valid email</span>
				): ''}
			</FormGroup>
			<Input type="submit" value="Login" className="submit-btn login-btn" />
			</Form>
			</div>
			</Container>
		);
	}
}
export  default  HomePage
```
If you face any issues while integrating with your ReactJs applications or If you would like to give any suggestions please add them as issues in the Github repository. 
[GitHub issues link](https://github.com/medaamarnadh/react-html5-validations/issues)

---
_Source: https://npm.io/package/react-html5-validations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._