Changelog updated for v2.0.0

1) Documents are review and corrected the mistakes.
2) Event is renamed from onreactformsubmit to onformsubmit
3) Hierarchy is removed from documentation theme
4) Code sandbox urls are updated in the documentation
5) Readme.md, Versions.md, Changelog.md files are updated.

Signed-off-by: gokulakannant <gokulakannanthangaraji@gmail.com>

Author: gokulakannant

CHANGELOG.md

@@ -1,12 +1,44 @@
 # Introduction
+
 Documentation of React Form Input Validation API's for use of web developers validating React Forms.
 
-# Changelog
+## 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/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+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
 
-## [2.19.0] - 04/11/2019
 ### Added
-- Added the enum property
+
+- A limited featured package has published.

README.md

@@ -6,7 +6,7 @@
 A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to validate the react forms.
 
 * [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?
@@ -19,11 +19,11 @@ A customized [validatorjs](https://www.npmjs.com/package/validatorjs) library to
 
 ## 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) {
@@ -36,17 +36,15 @@ class ValidationForm extends React.Component {
       },
       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 +57,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.errors.name ? this.state.errors.name.message : ""}
+                {this.state.errors.name ? this.state.errors.name : ""}
               </label>
             </p>
 
@@ -75,12 +73,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.errors.email ? this.state.errors.email.message : ""}
+                {this.state.errors.email ? this.state.errors.email : ""}
               </label>
             </p>
 
@@ -91,12 +89,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.errors.phone_number ? this.state.errors.phone_number.message : ""}
+                {this.state.errors.phone_number ? this.state.errors.phone_number : ""}
               </label>
             </p>
             <p>
@@ -117,14 +115,20 @@ 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"
     />
 ```
 
 The output will be like, "The USER NAME field is required.".
 
+## Supported form fields
+
+## Versions
+
+Latest Version: 2.0.0. For more versions refer [VERSIONS.md](VERSIONS.md).
+
 ## Changelog
 
 Recently Updated? Please read the [changelog](CHANGELOG.md).

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.

example/src/Form.js

@@ -32,20 +32,20 @@ class ValidationForm extends React.Component {
       extras: "required|array"
     });
 
-    this.form.addEventListener("reactformsubmit", (fields) => {
+    this.form.addEventListener("formsubmit", (fields) => {
       console.log("1st reactsubmit", fields);
     });
 
-    this.form.addEventListener("reactformsubmit", (fields) => {
+    this.form.addEventListener("formsubmit", (fields) => {
       console.log("2nd reactsubmit", fields);
     });
 
-    this.form.onreactformsubmit = (fields) => {
-      console.log("1st onreactformsubmit", fields);
+    this.form.onformsubmit = (fields) => {
+      console.log("1st onformsubmit", fields);
     }
 
-    this.form.onreactformsubmit = (fields) => {
-      console.log("2nd onreactformsubmit", fields);
+    this.form.onformsubmit = (fields) => {
+      console.log("2nd onformsubmit", fields);
     }
 
     ReactFormValidation.registerAsync('username_available', function(username, attribute, req, passes) {
@@ -63,10 +63,9 @@ class ValidationForm extends React.Component {
   }
 
   render() {
-    console.log(this.state)
     return (
         <div style={{maxWidth: "600px", margin: "0 auto"}}>
-          <h3>React Input Form Validation</h3>
+          <h3>React Form Input Validation</h3>
           <form
             className="myForm"
             noValidate

src/index.ts

@@ -1,12 +1,12 @@
 const Validator = require("validatorjs");
 import { IReactComponent, IOptions, IValidatorErrors, IDynamicKeyValues, ReactFormSubmitEventHandler,
-    ReactFormInputValidation as BaseValidator } from "./specs/react-form-input-validator.spec";
+    ReactFormInputValidation as BaseValidation } from "./specs/react-form-input-validator.spec";
 
-class ReactFormInputValidation extends BaseValidator {
+class ReactFormInputValidation extends BaseValidation {
     private component: IReactComponent;
     private rules: object = {};
     private errors: IValidatorErrors = {};
-    private _onreactformsubmit: ReactFormSubmitEventHandler;
+    private _onformsubmit: ReactFormSubmitEventHandler;
 
     constructor(component: IReactComponent, options?: IOptions) {
         super(component, options);
@@ -45,17 +45,17 @@ class ReactFormInputValidation extends BaseValidator {
         Validator.setAttributeFormatter(callbackFn);
     }
 
-    public set onreactformsubmit(callback: ReactFormSubmitEventHandler) {
-        if (this._onreactformsubmit) {
-            super.removeListener("reactformsubmit", this._onreactformsubmit);
+    public set onformsubmit(callback: ReactFormSubmitEventHandler) {
+        if (this._onformsubmit) {
+            super.removeListener("formsubmit", this._onformsubmit);
         }
 
-        this._onreactformsubmit = callback;
-        super.addListener("reactformsubmit", this._onreactformsubmit);
+        this._onformsubmit = callback;
+        super.addListener("formsubmit", this._onformsubmit);
     }
 
-    public get onreactformsubmit(): ReactFormSubmitEventHandler {
-        return this._onreactformsubmit;
+    public get onformsubmit(): ReactFormSubmitEventHandler {
+        return this._onformsubmit;
     }
 
     public addEventListener(event: string, callback: (...args: Array<any>) => void): this {
@@ -240,7 +240,7 @@ class ReactFormInputValidation extends BaseValidator {
      * @param details The form fields to send in the event
      */
     private getEvent(details: any): CustomEvent {
-        return new CustomEvent("reactformsubmit", {
+        return new CustomEvent("formsubmit", {
             detail: details
         });
     }