Merge pull request #10 from gokulakannant/develop

Develop

Author: gokulakannant

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist
 Documentation
+example/package-lock.json

.npmignore

@@ -14,3 +14,4 @@ dist/typedocconfig.d.ts
 Documentation/
 node_modules/
 .travis.yml
+theme/

CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to React Form Input Validation APIs will be documented in th
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [2.0.1] - 25/11/2019
+
+### Fixed
+
+- Fixed `onformsubmit` event is received with empty values.
+
 ## [2.0.0] - 22/11/2019
 
 ### Added

README.md

@@ -1,4 +1,4 @@
-# React Input Form Validation
+# React Form Input 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)
@@ -7,7 +7,7 @@
 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/v2.0.0/index.html)
+* [Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.1/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?
@@ -36,7 +36,7 @@ Using [yarn](https://yarnpkg.com/en/) as your package manager.
 
 ## Usage
 
-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).
+A example form has given below. View all available apis in [documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.1/index.html).
 
 ```js
 import React from "react";
@@ -142,7 +142,7 @@ The output will be like, "The Username field is required.".
 
 ## Supported form fields
 
-|Form Fields and Attributes|Support By Library|
+|Form Fields and Attributes|Supported By Library|
 | :-- |:--:|
 |text|☑|
 |password|☑|

VERSIONS.md

@@ -8,6 +8,7 @@ The most recent version is recommended in production.
 
 |Versions|Documents|Releases|
 |--------|---------|--------|
+|v2.0.1|[Documentation](https://gokulakannant.github.io/react-form-input-validation/v2.0.1/index.html)|[Release notes](https://github.com/gokulakannant/react-form-input-validation/releases/tag/v2.0.1)|
 |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)|             |
 

example/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-form-input-validation": "^1.0.0",
+    "react-form-input-validation": "^2.0.1",
     "react-scripts": "3.2.0"
   },
   "scripts": {

example/src/Form.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactFormValidation from "react-form-input-validation";
+import ReactFormValidation, { Lang } from "react-form-input-validation";
 import "./Form.css";
 
 class ValidationForm extends React.Component {
@@ -44,10 +44,12 @@ class ValidationForm extends React.Component {
           passes();
       }, 1000);
     });
-    /* let messages = ReactFormValidation.getMessages('en');
-    messages.required = 'Whoops, :attribute field is required.';
+    let messages = ReactFormValidation.getMessages(Lang.en);
+    console.log(messages);
+    /* messages.required = 'Whoops, :attribute field is required.';
     ReactFormValidation.setMessages('en', messages);
-    ReactFormValidation.useLang('en') */
+    console.log(Lang)
+    ReactFormValidation.useLang(Lang.fr) */
   }
 
   render() {

package-lock.json

@@ -1,10 +1,11 @@
 {
   "name": "react-form-input-validation",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A validator package to validate the react forms",
   "main": "./dist/bundle.js",
   "license": "GPLv3",
-  "author": "gokulakannant <gokulakannanthangaraji@gmail.com>",
+  "author": "gokulakannant <gokulakannanthangaraji@gmail.com> (https://gokulakannant.github.io)",
+  "homepage": "https://gokulakannant.github.io/react-form-input-validation/v2.0.1/index.html",
   "repository": {
     "type": "git",
     "url": "https://github.com/gokulakannant/react-form-input-validation.git"

package.json

@@ -1,6 +1,6 @@
 const Validator = require("validatorjs");
 import { IReactComponent, IOptions, IValidatorErrors, IDynamicKeyValues, ReactFormSubmitEventHandler,
-    ReactFormInputValidation as BaseValidation } from "./specs/react-form-input-validator.spec";
+    ReactFormInputValidation as BaseValidation, Lang } from "./specs/react-form-input-validator.spec";
 
 class ReactFormInputValidation extends BaseValidation {
     private component: IReactComponent;
@@ -29,15 +29,15 @@ class ReactFormInputValidation extends BaseValidation {
         Validator.registerAsync(name, callbackFn);
     }
 
-    static setMessages(name: string, values: object): void {
-        Validator.setMessages(name, values);
+    static setMessages(langCode: Lang, values: object): void {
+        Validator.setMessages(langCode, values);
     }
 
-    static getMessages(name: string): object {
-        return Validator.getMessages(name);
+    static getMessages(langCode: Lang): object {
+        return Validator.getMessages(langCode);
     }
 
-    static getDefaultLang(): string {
+    static getDefaultLang(): Lang {
         return Validator.getDefaultLang();
     }
 
@@ -95,40 +95,52 @@ class ReactFormInputValidation extends BaseValidation {
 
     public handleSubmit(event: React.FormEvent) {
         event.preventDefault();
-        if (this.validateForm(event.target)) {
-            super.emit(this.getEvent(this.component.state.fields));
-        }
+        this.validateForm(event.target).then(hasError => {
+            if (!hasError) {
+                super.emit(this.getEvent(this.component.state.fields));
+            }
+        });
     }
 
     /**
      * Validate the entire html form on submit.
      *
      * @param form Html form
      */
-    private validateForm(form): boolean {
+    private validateForm(form): Promise<boolean> {
         if (!this.component || !this.component.state) {
             this.component.state = {
                 errors: {}
             };
         }
 
+        const validatePromises: Array<Promise<any>> = [];
+
         form.querySelectorAll("textarea,select,input:not([type='submit']):not([type='file']):not([data-ignore-validation])")
             .forEach((element) => {
-            this.validate(element).then((inputErrors) => {
-                this.errors = Object.assign(this.errors, inputErrors);
-                this.component.setState({
-                    errors: this.errors,
-                    isValidatorUpdate: true
-                });
-            }).catch(error => console.error(error));
+            validatePromises.push(this.validate(element));
         });
 
-        if (Object.keys(this.component.state.errors)[0] &&
-            form.querySelector(`[name="${Object.keys(this.component.state.errors)[0]}"]`)) {
-            form.querySelector(`[name="${Object.keys(this.component.state.errors)[0]}"]`).focus();
-        }
-
-        return Object.keys(this.component.state.errors).length === 0;
+        return new Promise((resolve) => {
+            Promise.all(validatePromises)
+                    .then((results) => {
+                       results.forEach((eachResult) => {
+                        this.errors = Object.assign(this.errors, eachResult);
+                        this.component.setState({
+                            errors: this.errors,
+                            isValidatorUpdate: true
+                        });
+                       });
+
+                       if (Object.keys(this.component.state.errors)[0] &&
+                            form.querySelector(`[name="${Object.keys(this.component.state.errors)[0]}"]`)) {
+                            form.querySelector(`[name="${Object.keys(this.component.state.errors)[0]}"]`).focus();
+                        }
+
+                       resolve(Object.keys(this.component.state.errors).length === 0);
+                    })
+                    .catch(errors => console.log(errors));
+        });
     }
 
     /**
@@ -246,4 +258,7 @@ class ReactFormInputValidation extends BaseValidation {
     }
 }
 
+export {
+    Lang
+};
 export default ReactFormInputValidation;

src/index.ts

@@ -403,31 +403,34 @@ export abstract class ReactFormInputValidation extends EventTarget {
     /**
      * You can also add your own custom language by calling setMessages.
      *
-     * @param name The name of the rule.
+     * @param langCode Override {@link Lang} code validation error messages.
      * @param values A error messages object.
      * @example
      * ```js
      *
-     * ReactFormInputValidation.setMessages('lang_code', {
+     * import ReactFormInputValidation, { Lang } from "react-form-input-validation";
+     *
+     * ReactFormInputValidation.setMessages(Lang.en, {
      *  required: 'The :attribute field is required.'
      * });
      * ```
      * @see Example in [Code Sandbox](https://codesandbox.io/s/react-form-input-validationattribute-formattors-bfomi).
      */
-    static setMessages(name: string, values: object): void { }
+    static setMessages(langCode: Lang, values: object): void { }
 
     /**
      * Get the raw object of messages for the given language.
      *
-     * @param name The name of the rule.
+     * @param langCode Retrive {@link Lang} code validation error messages.
      * @example
      * ```js
      *
-     * ReactFormInputValidation.getMessages('lang_code');
+     * import ReactFormInputValidation, { Lang } from "react-form-input-validation";
+     * ReactFormInputValidation.getMessages(Lang.en); (i.e) 'en'
      * ```
      * @see Example in [Code Sandbox](https://codesandbox.io/s/react-form-input-validationattribute-formattors-bfomi).
      */
-    static getMessages(name: string): object { return _; }
+    static getMessages(langCode: Lang): object { return _; }
 
     /***
      * Get the default language being used.
@@ -438,7 +441,7 @@ export abstract class ReactFormInputValidation extends EventTarget {
      * ```
      * @see Example in [Code Sandbox](https://codesandbox.io/s/react-form-input-validationlocale-rhz6w).
      */
-    static getDefaultLang(): string { return _; }
+    static getDefaultLang(): Lang { return _; }
 
     /**
      * You can supply global custom attribute names in your app with the attributes property.