Merge pull request #9 from gokulakannant/feature/updates

Feature/updates

Author: gokulakannant

CHANGELOG.md

@@ -0,0 +1,44 @@
+# Introduction
+
+Documentation of React Form Input Validation API's for use of web developers validating React Forms.
+
+## Changelog
+
+All notable changes to React Form Input Validation APIs will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+## [2.0.0] - 22/11/2019
+
+### Added
+
+- Added the following new API's
+    - [`useRules`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#userules)
+    - [`registerAsync`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#registerasync)
+    - [`setAttributeFormatter`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#setattributeformatter)
+    - [`addEventListener`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#addeventlistener)
+    - [`removeEventListener`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#removeeventlistener)
+- A new custom event is introduced to provide validated form data.
+    -  [`onformsubmit`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#onformsubmit)
+- A custom attribute `data-async` introduced to denotes async validation form field.
+  It should be mentioned in form field, if the form field has async validation. Refer [`registerAsync`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#registerasync) API for more details.
+
+### Modified
+
+- API Documentation contents has improved.
+- More Code Sandbox examples are added in the API document.
+- Modified API name from `handleFieldsChange` to [`handleChangeEvent`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#handlechangeevent).
+- Error message containing state `inputErrors` is renamed to `errors`.
+- Accessing error message in state is modified from `state.inputErrors.{form field name}.message` to `state.errors.{form field name}`.
+
+### Removed
+
+- [Contructor](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#constructor) arguments reduced.
+    - Rules passing in consturctor is removed. And the alternate is [`useRules`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#userules).
+    - Handle submit callback in constructor removed. And the alternate is [`onformsubmit`](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/classes/reactforminputvalidation.html#onformsubmit) event.
+
+## [1.0.1] - 14/11/2019
+
+### Added
+
+- A limited featured package has published.

README.md

@@ -1,12 +1,13 @@
 # React Input Form Validation
 
+[![npm package](https://img.shields.io/npm/v/react-form-input-validation)](https://www.npmjs.com/package/react-form-input-validation)
 [![Build Status](https://api.travis-ci.org/gokulakannant/react-form-input-validation.png?branch=master)](https://travis-ci.org/gokulakannant/react-form-input-validation)
 [![GitHub license](https://img.shields.io/github/license/gokulakannant/react-form-input-validation.svg)](https://github.com/gokulakannant/react-form-input-validation/blob/master/LICENSE.md)
 
-A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to validate the react forms.
+A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to validate the react forms. It uses the [Controlled Components](https://reactjs.org/docs/forms.html#controlled-components) approach for validation.
 
 * [Supported Rules](https://www.npmjs.com/package/validatorjs#available-rules) (It is supports all validatorjs rules)
-* [Documentation](https://gokulakannant.github.io/react-form-input-validation/index.html)
+* [Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/index.html)
 * [Demo](https://codesandbox.io/s/react-form-input-validation-demp-hyuju?fontsize=14&hidenavigation=1&theme=dark) (in CodeSandbox)
 
 ## Why use react-form-input-validation?
@@ -17,13 +18,29 @@ A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to
 * Readable and declarative validation rules which is inspired by laravel framework.
 * Error messages with multilingual support.
 
+## Installation
+
+To install the stable version:
+
+Using [npm](https://www.npmjs.com/) as your package manager.
+
+```bash
+  npm install --save react-form-input-validation
+```
+
+Using [yarn](https://yarnpkg.com/en/) as your package manager.
+
+```bash
+  yarn add react-form-input-validation
+```
+
 ## Usage
 
-A example form has given below. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/classes/reactformvalidator.html).
+A example form has given below. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/index.html).
 
 ```js
 import React from "react";
-import ReactFormValidation from "react-form-input-validation";
+import ReactFormInputValidation from "react-form-input-validation";
 
 class ValidationForm extends React.Component {
   constructor(props) {
@@ -34,19 +51,17 @@ class ValidationForm extends React.Component {
         email: "",
         phone_number: ""
       },
-      inputErrors: {}
+      errors: {}
     };
-    this.form = new ReactFormValidation(
-      this,
-      {
+    this.form = new ReactFormInputValidation(this);
+    this.form.useRules({
         name: "required",
         email: "required|email",
         phone_number: "required|numeric|digits_between:10,12",
-      },
-      (fields) => {
-        alert(JSON.stringify(fields));
-      }
-    );
+    });
+    this.form.onformsubmit = (fields) => {
+      // Do you ajax calls here.
+    }
   }
 
   render() {
@@ -59,12 +74,12 @@ class ValidationForm extends React.Component {
                   type="text"
                   name="name"
                   onBlur={this.form.handleBlurEvent}
-                  onChange={this.form.handleFieldsChange}
+                  onChange={this.form.handleChangeEvent}
                   value={this.state.fields.name}
                 />
               </label>
               <label className="error">
-                {this.state.inputErrors.name ? this.state.inputErrors.name.message : ""}
+                {this.state.errors.name ? this.state.errors.name : ""}
               </label>
             </p>
 
@@ -75,12 +90,12 @@ class ValidationForm extends React.Component {
                   type="email"
                   name="email"
                   onBlur={this.form.handleBlurEvent}
-                  onChange={this.form.handleFieldsChange}
+                  onChange={this.form.handleChangeEvent}
                   value={this.state.fields.email}
                 />
               </label>
               <label className="error">
-                {this.state.inputErrors.email ? this.state.inputErrors.email.message : ""}
+                {this.state.errors.email ? this.state.errors.email : ""}
               </label>
             </p>
 
@@ -91,12 +106,12 @@ class ValidationForm extends React.Component {
                   type="tel"
                   name="phone_number"
                   onBlur={this.form.handleBlurEvent}
-                  onChange={this.form.handleFieldsChange}
+                  onChange={this.form.handleChangeEvent}
                   value={this.state.fields.phone_number}
                 />
               </label>
               <label className="error">
-                {this.state.inputErrors.phone_number ? this.state.inputErrors.phone_number.message : ""}
+                {this.state.errors.phone_number ? this.state.errors.phone_number : ""}
               </label>
             </p>
             <p>
@@ -117,13 +132,49 @@ Refer the below example to override the attribute name,
         type="text"
         name="name"
         onBlur={this.form.handleBlurEvent}
-        onChange={this.form.handleFieldsChange}
+        onChange={this.form.handleChangeEvent}
         value={this.state.fields.name}
-        data-attribute-name="USER NAME"
+        data-attribute-name="Username"
     />
 ```
 
-The output will be like, "The USER NAME field is required.".
+The output will be like, "The Username field is required.".
+
+## Supported form fields
+
+|Form Fields and Attributes|Support By Library|
+| :-- |:--:|
+|text|&#x2611;|
+|password|&#x2611;|
+|email|&#x2611;|
+|url|&#x2611;|
+|number|&#x2611;|
+|checkbox|&#x2611;|
+|radio|&#x2611;|
+|search|&#x2611;|
+|tel|&#x2611;|
+|date|&#x2611;|
+|month|&#x2611;|
+|week|&#x2611;|
+|time|&#x2611;|
+|datetime-local|&#x2611;|
+|textarea|&#x2611;|
+|select|&#x2611;|
+|color|&#x2611;|
+|Combo Box Fields|&#x2611;|
+|file|&#x2612;|
+|range|&#x2612;|
+|image|&#x2612;|
+
+The input types button, submit, reset, hidden are exceptional from the above list.
+
+## Versions
+
+Latest Version: 2.0.0. For more versions refer [VERSIONS.md](VERSIONS.md).
+
+## Changelog
+
+Recently Updated? Please read the [changelog](CHANGELOG.md).
 
 ## License
 

VERSIONS.md

@@ -0,0 +1,20 @@
+# React Form Input Validation Versions
+
+You can come back to this page and switch the version of the docs you're reading at any time.
+
+## Stable versions
+
+The most recent version is recommended in production.
+
+|Versions|Documents|Releases|
+|--------|---------|--------|
+|v2.0.0|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.0/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.0.0)|
+|v1.0.1|[Documentation](https://gokulakannant.github.io/react-form-input-validation/index.html)|             |
+
+## Versioning strategy
+
+React Form Input Validation follows [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html). React Form Input Validation version numbers have three parts: major.minor.patch. The version number is incremented based on the level of change included in the release.
+
+* **Major releases** contain significant new features, some but minimal developer assistance is expected during the update. When updating to a new major release, you may need to run update scripts, refactor code, run additional tests, and learn new APIs.
+* **Minor releases** contain important new features. Minor releases are fully backward-compatible; no developer assistance is expected during update, but you can optionally modify your apps and libraries to begin using new APIs, features, and capabilities that were added in the release.
+* **Patch releases** are low risk, contain bug fixes and small new features. No developer assistance is expected during update.