react-form-input-validation - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

dist/bundle.js

@@ -1,1 +0,1 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("validatorjs"));else if("function"==typeof define&&define.amd)define(["validatorjs"],e);else{var n="object"==typeof exports?e(require("validatorjs")):e(t.validatorjs);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(window,function(n){return i={},o.m=r=[function(t,e,n){"use strict";var r,o=this&&this.__extends||(r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),i=this&&this.__spreadArrays||function(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var r=Array(t),o=0,e=0;e<n;e++)for(var i=arguments[e],s=0,a=i.length;s<a;s++,o++)r[o]=i[s];return r};Object.defineProperty(e,"__esModule",{value:!0}),e.Lang=void 0;var c=n(1),s=n(2);Object.defineProperty(e,"Lang",{enumerable:!0,get:function(){return s.Lang}});var a,u=(a=s.ReactFormInputValidation,o(f,a),f.useLang=function(t){c.useLang(t)},f.register=function(t,e,n){c.register(t,e,n)},f.registerAsync=function(t,e){c.registerAsync(t,e)},f.setMessages=function(t,e){c.setMessages(t,e)},f.getMessages=function(t){return c.getMessages(t)},f.getDefaultLang=function(){return c.getDefaultLang()},f.setAttributeFormatter=function(t){c.setAttributeFormatter(t)},Object.defineProperty(f.prototype,"onformsubmit",{get:function(){return this._onformsubmit},set:function(t){this._onformsubmit&&a.prototype.removeListener.call(this,"formsubmit",this._onformsubmit),this._onformsubmit=t,a.prototype.addListener.call(this,"formsubmit",this._onformsubmit)},enumerable:!1,configurable:!0}),f.prototype.addEventListener=function(t,e){return a.prototype.addListener.call(this,t,e),this},f.prototype.removeEventListener=function(t,e){return a.prototype.removeListener.call(this,t,e),this},f.prototype.useRules=function(t){this.rules=t},f.prototype.handleChangeEvent=function(t){var e,n=t.target.name;this.component&&n&&((e=Object.assign({},this.component.state.fields))[n]="checkbox"===t.target.type?this.getCheckboxValues(t.target):"radio"===t.target.type?this.getRadioButtonValues(t.target):t.target.value,this.component.setState({fields:e,isValidatorUpdate:!0}))},f.prototype.handleBlurEvent=function(t){var e=this,n=t.target;this.validate([n]).then(function(t){e.component&&e.component.hasOwnProperty("state")&&(e.errors=Object.assign(e.errors,t),e.component.setState({errors:e.errors,isValidatorUpdate:!0}))}).catch(function(t){return console.error(t)})},f.prototype.handleSubmit=function(t){var e=this;t.preventDefault(),this.validateForm(t.target).then(function(t){t&&a.prototype.emit.call(e,e.getEvent(e.component.state.fields))})},f.prototype.validateForm=function(n){var r=this;this.component&&this.component.state||(this.component.state={errors:{}});var o=[];return n.querySelectorAll("textarea,select,input:not([type='submit']):not([type='file']):not([data-ignore-validation])").forEach(function(t){o.push(t)}),new Promise(function(e){r.validate(o).then(function(t){r.errors=t,r.component.setState({errors:r.errors,isValidatorUpdate:!0}),Object.keys(r.component.state.errors)[0]&&n.querySelector('[name="'+Object.keys(r.component.state.errors)[0]+'"]')&&n.querySelector('[name="'+Object.keys(r.component.state.errors)[0]+'"]').focus(),e(0===Object.keys(r.component.state.errors).length)}).catch(function(t){return console.log(t)})})},f.prototype.getRadioButtonValues=function(t){var e=document.getElementsByName(t.name),n=i(e).filter(function(t){return!0===t.checked});return n[0]?n[0].value:""},f.prototype.getCheckboxValues=function(t){var e=document.getElementsByName(t.name),n=i(e).filter(function(t){return!0===t.checked}),r=[];return n.forEach(function(t){return r.push(t.value)}),r},f.prototype.validate=function(a){var u=this;return new Promise(function(t){var e={},r={},o={},i={},s=!1;a.forEach(function(t){var e,n=t.getAttribute("name");r[n]=u.component.state.fields[n],o[n]=u.rules[n],o[n]||console.error("Rule is not defind for "+n),n.endsWith("_confirmation")&&(e=n.slice(0,n.indexOf("_confirmation")),r[e]=u.component.state.fields[e]),t.hasAttribute("data-attribute-name")&&(i[n]=t.getAttribute("data-attribute-name")),t.hasAttribute("data-async")&&(s=!0)});var n=new c(r,o);if(n.setAttributeNames(i),!s)return n.fails()?e=u.fillErrors(n):u.invalidateErrors(r),t(e);n.checkAsync(function(){u.invalidateErrors(r),t(e)},function(){e=u.fillErrors(n),t(e)})})},f.prototype.fillErrors=function(e){var n={};return Object.keys(e.errors.all()).forEach(function(t){n[t]=e.errors.first(t)}),n},f.prototype.invalidateErrors=function(t){var e=this;Object.keys(t).forEach(function(t){delete e.errors[t]})},f.prototype.getEvent=function(t){return new CustomEvent("formsubmit",{detail:t})},f);function f(t,e){var n=a.call(this,t,e)||this;return n.rules={},n.errors={},f.useLang(e&&e.locale?e.locale:"en"),n.component=t,n.handleChangeEvent=n.handleChangeEvent.bind(n),n.handleSubmit=n.handleSubmit.bind(n),n.handleBlurEvent=n.handleBlurEvent.bind(n),n}e.default=u},function(t,e){t.exports=n},function(t,e,n){"use strict";var r,o,i=this&&this.__extends||(r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)});Object.defineProperty(e,"__esModule",{value:!0}),e.ReactFormInputValidation=e.Lang=void 0,(o=e.Lang||(e.Lang={})).ar="ar",o.az="az",o.be="be",o.bg="bg",o.bs="bs",o.ca="ca",o.cs="cs",o.cy="cy",o.da="da",o.de="de",o.el="el",o.en="en",o.es="es",o.et="et",o.eu="eu",o.fa="fa",o.fi="fi",o.fr="fr",o.hr="hr",o.hu="hu",o.id="id",o.it="it",o.ja="ja",o.ka="ka",o.ko="ko",o.It="It",o.Iv="Iv",o.mk="mk",o.mn="mn",o.ms="ms",o.nb_NO="nb_NO",o.nl="nl",o.pl="pl",o.pt="pt",o.pt_BR="pt_BR",o.ro="ro",o.ru="ru",o.se="se",o.sl="sl",o.sq="sq",o.sr="sr",o.sv="sv",o.tr="tr",o.ua="ua",o.uk="uk",o.vi="vi",o.zh="zh",o.zh_TW="zh_TW";var s,a=(u.prototype.addListener=function(t,e){t in this.listeners||(this.listeners[t]=[]),this.listeners[t].push(e)},u.prototype.removeListener=function(t,e){if(t in this.listeners)for(var n=this.listeners[t],r=0,o=n.length;r<o;r++)if(n[r]===e)return void n.splice(r,1)},u.prototype.emit=function(t){if(!(t.type in this.listeners))return!0;for(var e=this.listeners[t.type].slice(),n=0,r=e.length;n<r;n++)e[n].call(this,t.detail);return!t.defaultPrevented},u);function u(){this.listeners={}}var c,f=(i(l,c=a),l.useLang=function(t){},l.register=function(t,e,n){},l.registerAsync=function(t,e){},l.setMessages=function(t,e){},l.getMessages=function(t){return s},l.getDefaultLang=function(){return s},l.setAttributeFormatter=function(t){},l.prototype.addEventListener=function(t,e){return s},l.prototype.removeEventListener=function(t,e){return s},l.prototype.useRules=function(t){},l.prototype.handleChangeEvent=function(t){},l.prototype.handleBlurEvent=function(t){},l.prototype.handleSubmit=function(t){},l);function l(t,e){return c.call(this)||this}e.ReactFormInputValidation=f}],o.c=i,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0);function o(t){if(i[t])return i[t].exports;var e=i[t]={i:t,l:!1,exports:{}};return r[t].call(e.exports,e,e.exports,o),e.l=!0,e.exports}var r,i});
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("validatorjs"));else if("function"==typeof define&&define.amd)define(["validatorjs"],e);else{var n="object"==typeof exports?e(require("validatorjs")):e(t.validatorjs);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(window,function(n){return i={},o.m=r=[function(t,e,n){"use strict";var r,o=this&&this.__extends||(r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),i=this&&this.__spreadArrays||function(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var r=Array(t),o=0,e=0;e<n;e++)for(var i=arguments[e],s=0,a=i.length;s<a;s++,o++)r[o]=i[s];return r};Object.defineProperty(e,"__esModule",{value:!0}),e.Lang=void 0;var c=n(1),s=n(2);Object.defineProperty(e,"Lang",{enumerable:!0,get:function(){return s.Lang}});var a,u=(a=s.ReactFormInputValidation,o(f,a),f.useLang=function(t){c.useLang(t)},f.register=function(t,e,n){c.register(t,e,n)},f.registerAsync=function(t,e){c.registerAsync(t,e)},f.setMessages=function(t,e){c.setMessages(t,e)},f.getMessages=function(t){return c.getMessages(t)},f.getDefaultLang=function(){return c.getDefaultLang()},f.setAttributeFormatter=function(t){c.setAttributeFormatter(t)},Object.defineProperty(f.prototype,"onformsubmit",{get:function(){return this._onformsubmit},set:function(t){this._onformsubmit&&a.prototype.removeListener.call(this,"formsubmit",this._onformsubmit),this._onformsubmit=t,a.prototype.addListener.call(this,"formsubmit",this._onformsubmit)},enumerable:!1,configurable:!0}),f.prototype.addEventListener=function(t,e){return a.prototype.addListener.call(this,t,e),this},f.prototype.removeEventListener=function(t,e){return a.prototype.removeListener.call(this,t,e),this},f.prototype.useRules=function(t){this.rules=t},f.prototype.handleChangeEvent=function(t){var e,n=t.target.name;this.component&&n&&((e=Object.assign({},this.component.state.fields))[n]="checkbox"===t.target.type?this.getCheckboxValues(t.target):"radio"===t.target.type?this.getRadioButtonValues(t.target):t.target.value,this.component.setState({fields:e,isValidatorUpdate:!0}))},f.prototype.handleBlurEvent=function(t){var e=this,n=t.target;this.validate([n]).then(function(t){e.component&&e.component.hasOwnProperty("state")&&(e.errors=Object.assign(e.errors,t),e.component.setState({errors:e.errors,isValidatorUpdate:!0}))}).catch(function(t){return console.error(t)})},f.prototype.handleSubmit=function(t){var e=this;t.preventDefault(),this.validateForm(t.target).then(function(t){t&&a.prototype.emit.call(e,e.getEvent(e.component.state.fields))})},f.prototype.validateForm=function(n){var r=this;this.component&&this.component.state||(this.component.state={errors:{}});var o=[];return n.querySelectorAll("textarea,select,input:not([type='submit']):not([type='file']):not([data-ignore-validation])").forEach(function(t){o.push(t)}),new Promise(function(e){r.validate(o).then(function(t){r.errors=t,r.component.setState({errors:r.errors,isValidatorUpdate:!0}),Object.keys(r.component.state.errors)[0]&&n.querySelector('[name="'+Object.keys(r.component.state.errors)[0]+'"]')&&n.querySelector('[name="'+Object.keys(r.component.state.errors)[0]+'"]').focus(),e(0===Object.keys(r.component.state.errors).length)}).catch(function(t){return console.log(t)})})},f.prototype.getRadioButtonValues=function(t){var e=document.getElementsByName(t.name),n=i(e).filter(function(t){return!0===t.checked});return n[0]?n[0].value:""},f.prototype.getCheckboxValues=function(t){var e=document.getElementsByName(t.name),n=i(e).filter(function(t){return!0===t.checked}),r=[];return n.forEach(function(t){return r.push(t.value)}),r},f.prototype.validate=function(a){var u=this;return new Promise(function(t){var e={},r={},o={},i={},s=!1;a.forEach(function(t){var e,n=t.getAttribute("name");r[n]=u.component.state.fields[n],o[n]=u.rules[n],o[n]||(console.warn("Rule is not defind for "+n),o[n]=""),n.endsWith("_confirmation")&&(e=n.slice(0,n.indexOf("_confirmation")),r[e]=u.component.state.fields[e]),t.hasAttribute("data-attribute-name")&&(i[n]=t.getAttribute("data-attribute-name")),t.hasAttribute("data-async")&&(s=!0)});var n=new c(r,o);if(n.setAttributeNames(i),!s)return n.fails()?e=u.fillErrors(n):u.invalidateErrors(r),t(e);n.checkAsync(function(){u.invalidateErrors(r),t(e)},function(){e=u.fillErrors(n),t(e)})})},f.prototype.fillErrors=function(e){var n={};return Object.keys(e.errors.all()).forEach(function(t){n[t]=e.errors.first(t)}),n},f.prototype.invalidateErrors=function(t){var e=this;Object.keys(t).forEach(function(t){delete e.errors[t]})},f.prototype.getEvent=function(t){return new CustomEvent("formsubmit",{detail:t})},f);function f(t,e){var n=a.call(this,t,e)||this;return n.rules={},n.errors={},f.useLang(e&&e.locale?e.locale:"en"),n.component=t,n.handleChangeEvent=n.handleChangeEvent.bind(n),n.handleSubmit=n.handleSubmit.bind(n),n.handleBlurEvent=n.handleBlurEvent.bind(n),n}e.default=u},function(t,e){t.exports=n},function(t,e,n){"use strict";var r,o,i=this&&this.__extends||(r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)},function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)});Object.defineProperty(e,"__esModule",{value:!0}),e.ReactFormInputValidation=e.Lang=void 0,(o=e.Lang||(e.Lang={})).ar="ar",o.az="az",o.be="be",o.bg="bg",o.bs="bs",o.ca="ca",o.cs="cs",o.cy="cy",o.da="da",o.de="de",o.el="el",o.en="en",o.es="es",o.et="et",o.eu="eu",o.fa="fa",o.fi="fi",o.fr="fr",o.hr="hr",o.hu="hu",o.id="id",o.it="it",o.ja="ja",o.ka="ka",o.ko="ko",o.It="It",o.Iv="Iv",o.mk="mk",o.mn="mn",o.ms="ms",o.nb_NO="nb_NO",o.nl="nl",o.pl="pl",o.pt="pt",o.pt_BR="pt_BR",o.ro="ro",o.ru="ru",o.se="se",o.sl="sl",o.sq="sq",o.sr="sr",o.sv="sv",o.tr="tr",o.ua="ua",o.uk="uk",o.vi="vi",o.zh="zh",o.zh_TW="zh_TW";var s,a=(u.prototype.addListener=function(t,e){t in this.listeners||(this.listeners[t]=[]),this.listeners[t].push(e)},u.prototype.removeListener=function(t,e){if(t in this.listeners)for(var n=this.listeners[t],r=0,o=n.length;r<o;r++)if(n[r]===e)return void n.splice(r,1)},u.prototype.emit=function(t){if(!(t.type in this.listeners))return!0;for(var e=this.listeners[t.type].slice(),n=0,r=e.length;n<r;n++)e[n].call(this,t.detail);return!t.defaultPrevented},u);function u(){this.listeners={}}var c,f=(i(l,c=a),l.useLang=function(t){},l.register=function(t,e,n){},l.registerAsync=function(t,e){},l.setMessages=function(t,e){},l.getMessages=function(t){return s},l.getDefaultLang=function(){return s},l.setAttributeFormatter=function(t){},l.prototype.addEventListener=function(t,e){return s},l.prototype.removeEventListener=function(t,e){return s},l.prototype.useRules=function(t){},l.prototype.handleChangeEvent=function(t){},l.prototype.handleBlurEvent=function(t){},l.prototype.handleSubmit=function(t){},l);function l(t,e){return c.call(this)||this}e.ReactFormInputValidation=f}],o.c=i,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0);function o(t){if(i[t])return i[t].exports;var e=i[t]={i:t,l:!1,exports:{}};return r[t].call(e.exports,e,e.exports,o),e.l=!0,e.exports}var r,i});

package.json

 {
   "name": "react-form-input-validation",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "A validator package to validate the react forms",
@@ -5,0 +5,0 @@ "main": "./dist/bundle.js",

README.md

@@ -174,3 +174,3 @@ # React Form Input Validation
 
-Latest Version: 2.0.4. For more versions refer [VERSIONS.md](VERSIONS.md).
+Latest Version: 2.0.5. For more versions refer [VERSIONS.md](VERSIONS.md).
 
@@ -177,0 +177,0 @@ ## Changelog

demo/app/Form.css

-.container {
-  max-width: "600px";
-  margin: 0 auto
-}
-
-.error {
-  color: red;
-}
-
-.myForm {
-  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-  font-size: 0.8em;
-  width: 30em;
-  padding: 1em;
-  border: 1px solid #ccc;
-}
-
-.myForm * {
-  box-sizing: border-box;
-}
-
-.myForm fieldset {
-  border: none;
-  padding: 0;
-}
-
-.myForm legend,
-.myForm label {
-  padding: 0;
-  font-weight: bold;
-}
-
-.myForm label.choice {
-  font-size: 0.9em;
-  font-weight: normal;
-}
-
-.myForm label {
-  text-align: left;
-  display: block;
-}
-
-.myForm input[type="text"],
-.myForm input[type="tel"],
-.myForm input[type="email"],
-.myForm input[type="datetime-local"],
-.myForm select,
-.myForm textarea {
-  float: right;
-  width: 60%;
-  border: 1px solid #ccc;
-  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-  font-size: 0.9em;
-  padding: 0.3em;
-}
-
-.myForm textarea {
-  height: 100px;
-}
-
-.myForm input[type="radio"],
-.myForm input[type="checkbox"] {
-  margin-left: 40%;
-}
-
-.myForm button {
-  padding: 1em;
-  border-radius: 0.5em;
-  background: #eee;
-  border: none;
-  font-weight: bold;
-  margin-left: 40%;
-  margin-top: 1.8em;
-}
-
-.myForm button:hover {
-  background: #ccc;
-  cursor: pointer;
-}

demo/app/Form.js

-import React from "react";
-import ReactFormValidation, { Lang } from "react-form-input-validation";
-import "./Form.css";
-
-class ValidationForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      fields: {
-        customer_name: "",
-        email_address: "",
-        password: "",
-        password_confirmation: "",
-        phone_number: "",
-        pickup_time: "",
-        taxi: "",
-        pickup_place: "",
-        comments: "",
-        dropoff_place: "",
-        extras: []
-      },
-      errors: {}
-    };
-    this.form = new ReactFormValidation(this, { locale: "en" });
-    this.form.useRules({
-      customer_name: "required|username_available",
-      email_address: "required|email",
-      password: "required|confirmed",
-      password_confirmation: "required|same:password",
-      phone_number: "required|numeric|digits_between:10,12",
-      pickup_time: "required|date",
-      taxi: "required",
-      pickup_place: "required",
-      comments: "required|max:20",
-      dropoff_place: "required",
-      extras: "required|array"
-    });
-
-    this.form.onformsubmit = (fields) => {
-      console.log(fields);
-    }
-
-    ReactFormValidation.registerAsync('username_available', function(username, attribute, req, passes) {
-      setTimeout(() => {
-        if (username === "foo")
-          passes(false, 'Username has already been taken.'); // if username is not available
-        else
-          passes();
-      }, 1000);
-    });
-    let messages = ReactFormValidation.getMessages(Lang.en);
-    console.log(messages);
-    /* messages.required = 'Whoops, :attribute field is required.';
-    ReactFormValidation.setMessages('en', messages);
-    console.log(Lang)
-    ReactFormValidation.useLang(Lang.fr) */
-  }
-
-  render() {
-    return (
-        <div style={{maxWidth: "600px", margin: "0 auto"}}>
-          <h3>React Form Input Validation</h3>
-          <form
-            className="myForm"
-            noValidate
-            autoComplete="off"
-            onSubmit={this.form.handleSubmit}
-          >
-            <p>
-              <label>
-                Name
-                <input
-                  type="text"
-                  name="customer_name"
-                  onBlur={this.form.handleBlurEvent}
-                  onChange={this.form.handleChangeEvent}
-                  value={this.state.fields.customer_name}
-                  // To override the attribute name
-                  data-attribute-name="Customer Name"
-                  data-async
-                />
-              </label>
-              <label className="error">
-                {this.state.errors.customer_name
-                  ? this.state.errors.customer_name
-                  : ""}
-              </label>
-            </p>
-
-            <p>
-              <label>
-                Phone
-                <input
-                  type="tel"
-                  name="phone_number"
-                  onBlur={this.form.handleBlurEvent}
-                  onChange={this.form.handleChangeEvent}
-                  value={this.state.fields.phone_number}
-                />
-              </label>
-              <label className="error">
-                {this.state.errors.phone_number
-                  ? this.state.errors.phone_number
-                  : ""}
-              </label>
-            </p>
-
-            <p>
-              <label>
-                Email
-                <input
-                  type="email"
-                  name="email_address"
-                  onBlur={this.form.handleBlurEvent}
-                  onChange={this.form.handleChangeEvent}
-                  value={this.state.fields.email_address}
-                />
-              </label>
-              <label className="error">
-                {this.state.errors.email_address
-                  ? this.state.errors.email_address
-                  : ""}
-              </label>
-            </p>
-
-            <p>
-              <label>
-                Password
-                <input
-                  type="text"
-                  name="password"
-                  onBlur={this.form.handleBlurEvent}
-                  onChange={this.form.handleChangeEvent}
-                  value={this.state.fields.password}
-                />
-              </label>
-              <label className="error">
-                {this.state.errors.password
-                  ? this.state.errors.password
-                  : ""}
-              </label>
-            </p>
-
-            <p>
-              <label>
-                Confirm Password
-                <input
-                  type="text"
-                  name="password_confirmation"
-                  onBlur={this.form.handleBlurEvent}
-                  onChange={this.form.handleChangeEvent}
-                  value={this.state.fields.password_confirmation}
-                />
-              </label>
-              <label className="error">
-                {this.state.errors.password_confirmation
-                  ? this.state.errors.password_confirmation
-                  : ""}
-              </label>
-            </p>
-
-            <fieldset>
-              <legend>Which taxi do you require?</legend>
-              <p>
-                <label className="choice">
-                  {" "}
-                  <input
-                    type="radio"
-                    name="taxi"
-                    onChange={this.form.handleChangeEvent}
-                    value="car"
-                  />{" "}
-                  Car{" "}
-                </label>
-              </p>
-              <p>
-                <label className="choice">
-                  {" "}
-                  <input
-                    type="radio"
-                    name="taxi"
-                    onChange={this.form.handleChangeEvent}
-                    value="van"
-                  />{" "}
-                  Van{" "}
-                </label>
-              </p>
-              <p>
-                <label className="choice">
-                  {" "}
-                  <input
-                    type="radio"
-                    name="taxi"
-                    onChange={this.form.handleChangeEvent}
-                    value="tuk tuk"
-                  />{" "}
-                  Tuk Tuk{" "}
-                </label>
-              </p>
-              <label className="error">
-                {this.state.errors.taxi
-                  ? this.state.errors.taxi
-                  : ""}
-              </label>
-            </fieldset>
-
-            <fieldset>
-              <legend>Extras</legend>
-              <p>
-                <label className="choice">
-                  {" "}
-                  <input
-                    type="checkbox"
-                    name="extras"
-                    onChange={this.form.handleChangeEvent}
-                    value="baby"
-                  />{" "}
-                  Baby Seat{" "}
-                </label>
-              </p>
-              <p>
-                <label className="choice">
-                  {" "}
-                  <input
-                    type="checkbox"
-                    name="extras"
-                    onChange={this.form.handleChangeEvent}
-                    value="wheelchair"
-                  />{" "}
-                  Wheelchair Access{" "}
-                </label>
-              </p>
-              <p>
-                <label className="choice">
-                  {" "}
-                  <input
-                    type="checkbox"
-                    name="extras"
-                    onChange={this.form.handleChangeEvent}
-                    value="tip"
-                  />{" "}
-                  Stock Tip{" "}
-                </label>
-              </p>
-              <label className="error">
-                {this.state.errors.extras
-                  ? this.state.errors.extras
-                  : ""}
-              </label>
-            </fieldset>
-
-            <p>
-              <label>
-                Pickup Date
-                <input
-                  type="date"
-                  name="pickup_time"
-                  onChange={this.form.handleChangeEvent}
-                  // onBlur={this.form.handleBlurEvent}
-                  value={this.state.fields.pickup_time}
-                />
-              </label>
-              <label className="error">
-                {this.state.errors.pickup_time
-                  ? this.state.errors.pickup_time
-                  : ""}
-              </label>
-            </p>
-
-            <p>
-              <label>
-                Pickup Place
-                <select
-                  id="pickup_place"
-                  name="pickup_place"
-                  value={this.state.fields.pickup_place}
-                  onChange={this.form.handleChangeEvent}
-                  onBlur={this.form.handleBlurEvent}
-                >
-                  <option value="">Select One</option>
-                  <option value="office">Taxi Office</option>
-                  <option value="town_hall">Town Hall</option>
-                  <option value="telepathy">We'll Guess!</option>
-                </select>
-              </label>
-              <label className="error">
-                {this.state.errors.pickup_place
-                  ? this.state.errors.pickup_place
-                  : ""}
-              </label>
-            </p>
-
-            <p>
-              <label>
-                Dropoff Place
-                <input
-                  type="text"
-                  name="dropoff_place"
-                  value={this.state.fields.dropoff_place}
-                  onChange={this.form.handleChangeEvent}
-                  onBlur={this.form.handleBlurEvent}
-                  list="destinations"
-                />
-              </label>
-
-              <datalist id="destinations">
-                <option value="Airport" />
-                <option value="Beach" />
-                <option value="Fred Flinstone's House" />
-              </datalist>
-              <label className="error">
-                {this.state.errors.dropoff_place
-                  ? this.state.errors.dropoff_place
-                  : ""}
-              </label>
-            </p>
-
-            <p>
-              <label>
-                Special Instructions
-                <textarea
-                  name="comments"
-                  maxLength="20"
-                  value={this.state.fields.comments}
-                  onChange={this.form.handleChangeEvent}
-                  onBlur={this.form.handleBlurEvent}
-                ></textarea>
-              </label>
-              <label className="error">
-                {this.state.errors.comments
-                  ? this.state.errors.comments
-                  : ""}
-              </label>
-            </p>
-
-            <p>
-              <button type="submit">Submit Booking</button>
-            </p>
-          </form>
-        </div>
-    );
-  }
-}
-
-export default ValidationForm;

demo/app/index.html

-<!DOCTYPE html>
-<html>
-    <head><title>
-        React Form Input Validation
-    </title></head>
-    <body>
-        <div id="app"></div>
-    </body>
-</html>

demo/app/index.js

-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Form from "./Form";
-
-ReactDOM.render(<Form />, document.getElementById('app'))

demo/cypress.json

-{}

demo/cypress/fixtures/example.json

-{
-  "name": "Using fixtures to represent data",
-  "email": "[e-mail]",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

demo/cypress/integration/integration/form.spec.js

-describe('The Home Page', function() {
-    it('Successfull rendering', function() {
-      cy.visit('http://localhost:8080/')
-    })
-
-    it('Check Submit Button', function() {
-        cy.visit('http://localhost:8080/')
-        cy.contains('Submit Booking').click()
-      });
-  });
-
-describe("Test blur events", () => {
-    it('Successfull rendering', function() {
-        cy.visit('http://localhost:8080/')
-    })
-
-    it("Customer Name blur (Text field)", () => {
-        cy.get('input[name=customer_name]').focus().blur();
-        cy.contains("The Customer Name field is required.")
-    });
-
-    it("Phone number blur (Text field)", () => {
-        cy.get('input[name=phone_number]').focus().blur();
-        cy.contains("The phone number field is required.");
-    });
-
-    it("Email address blur (Text field)", () => {
-        cy.get('input[name=email_address]').focus().blur();
-        cy.contains("The email address field is required.");
-    });
-
-    it("Pickup Date blur (Date field)", () => {
-        cy.get('input[name=pickup_time]').focus().blur();
-        cy.contains("The pickup time field is required.");
-    });
-
-    it("Pickup Place blur (Dropdown)", () => {
-        cy.get('select[name=pickup_place]').focus().blur();
-        cy.contains("The pickup place field is required.");
-    });
-
-    it("Drop Place blur (Combo box)", () => {
-        cy.get('input[name=dropoff_place]').focus().blur();
-        cy.contains("The dropoff place field is required.");
-    });
-
-    it("Special instructions blur (Textarea)", () => {
-        cy.get('textarea').focus().blur();
-        cy.contains("The comments field is required.");
-    });
-});
-
-describe("Test change event", () => {
-    it('Successfull rendering', function() {
-        cy.visit('http://localhost:8080/')
-    });
-
-    it("Customer Name change event (Text field)", () => {
-        cy.get('input[name=customer_name]').focus().blur();
-        cy.get('input[name=customer_name]').type("gokulakannan").blur();
-        cy.contains("The Customer Name field is required.").should('not.exist');
-    });
-
-    it("Phone number change (Text field)", () => {
-        cy.get('input[name=phone_number]').focus().blur();
-        cy.get('input[name=phone_number]').type(9876543210).blur();
-        cy.contains("The phone number field is required.").should('not.exist');
-    });
-
-    it("Email address blur (Text field)", () => {
-        cy.get('input[name=email_address]').focus().blur();
-        cy.get('input[name=email_address]').type("[e-mail]").blur();
-        cy.contains("The email address field is required.").should('not.exist');
-    });
-
-    it("Pickup Date blur (Date field)", () => {
-        cy.get('input[name=pickup_time]').focus().blur();
-        cy.get('input[name=pickup_time]').type("2019-11-27").blur();
-        cy.contains("The pickup time field is required.").should('not.exist');
-    });
-
-    it("Pickup Place blur (Dropdown)", () => {
-        cy.get('select[name=pickup_place]').focus().blur();
-        cy.get('select[name=pickup_place]').select('town_hall');
-        // cy.contains("The pickup place field is required.").should('not.exist');
-    });
-
-    it("Drop Place blur (Combo box)", () => {
-        cy.get('input[name=dropoff_place]').focus().blur();
-        cy.get('input[name=dropoff_place]').type("Airport").blur();
-        cy.contains("The dropoff place field is required.").should('not.exist');
-    });
-
-    it("Special instructions blur (Textarea)", () => {
-        cy.get('textarea').focus().blur();
-        cy.get('textarea').type("Use react form input validator for testing").blur();
-        cy.contains("The comments field is required.").should('not.exist');
-    });
-});
-
-describe("Fill form fields", () => {
-    it('Successfull rendering', function() {
-        cy.visit('http://localhost:8080/')
-    });
-
-    it("Type customer name (Text field)", () => {
-        cy.get('input[name=customer_name]').type("gokulakannan").blur();
-    });
-
-    it("Type phone number (Text field)", () => {
-        cy.get('input[name=phone_number]').type(9876543210).blur();
-    });
-
-    it("Type email address (Text field)", () => {
-        cy.get('input[name=email_address]').type("[e-mail]").blur();
-    });
-
-    it("Select Taxi (Radio button)", () => {
-        cy.get('[type="radio"]').first().check()
-    });
-
-    it("Check extras (Checkbox)", () => {
-        cy.get('[type="checkbox"]').check(['baby', 'wheelchair'])
-    });
-
-    it("Select pickup Date (Date field)", () => {
-        cy.get('input[name=pickup_time]').type("2019-11-27").blur();
-    });
-
-    it("Select pickup Place (Dropdown)", () => {
-        cy.get('select[name=pickup_place]').select('town_hall')
-    });
-
-    it("Choose drop Place (Combo box)", () => {
-        cy.get('input[name=dropoff_place]').type("Airport").blur();
-    });
-
-    it("Type Special instructions (Textarea)", () => {
-        cy.get('textarea').type("Use react form input validator for testing").blur();
-        cy.contains("The comments field is required.").should('not.exist');
-    });
-});
-
-describe("Test validation rules in form fields", () => {
-    beforeEach("Render home page", () => {
-        cy.visit('http://localhost:8080/');
-    })
-    describe("Customer name (required)", () => {
-        it("Empty fields should display error message", () => {
-            cy.get('input[name=customer_name]').focus().blur();
-            cy.contains("The Customer Name field is required.");
-        });
-
-        it("Valid data should not display error message", () => {
-            cy.get('input[name=customer_name]').focus().blur();
-            cy.get('input[name=customer_name]').type("gokulakannan").blur();
-            cy.contains("The Customer Name field is required.").should('not.exist');
-        });
-    });
-
-    describe("Phone number (numeric, min, max)", () => {
-        it("Invalid alphabet phone number should display error message", () => {
-            cy.get('input[name=phone_number]').type("test").blur();
-            cy.contains("The phone number must be a number.");
-        });
-
-        it("Min length phone number should display error message", () => {
-            cy.get('input[name=phone_number]').type(321).blur();
-            cy.contains("The phone number field must be between 10 and 12 digits.");
-        });
-
-        it("Max length phone number should display error message", () => {
-            cy.get('input[name=phone_number]').type(321).blur();
-            cy.contains("The phone number field must be between 10 and 12 digits.");
-        });
-
-        it("Valid phone number should not display error message", () => {
-            cy.get('input[name=phone_number]').type(9876543210).blur();
-            cy.contains("The phone number must be a number.").should('not.exist');
-        });
-    });
-
-    describe("Email address (email)", () => {
-        it("Invalid email address should display error message", () => {
-            cy.get('input[name=email_address]').type("test").blur();
-            cy.contains("The email address format is invalid.");
-        });
-
-        it("Valid email address should not display error message", () => {
-            cy.get('input[name=email_address]').type("[e-mail]").blur();
-            cy.contains("The email address format is invalid.").should('not.exist');
-        });
-    });
-})

demo/cypress/plugins/index.js

-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}

demo/cypress/support/commands.js

-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

demo/cypress/support/index.js

-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

demo/package.json

-{
-  "name": "demo",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT",
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ]
-  },
-  "scripts": {
-    "start": "webpack-dev-server --open",
-    "auto-test": "cypress open"
-  },
-  "dependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-form-input-validation": "./react-form-input-validation-2.0.2.tgz"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "babel-loader": "^8.1.0",
-    "css-loader": "^4.2.1",
-    "cypress": "^4.12.1",
-    "html-webpack-plugin": "^4.3.0",
-    "style-loader": "^1.2.1",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
-  }
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

Package contains multiple licenses.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

2

-33.33%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

66122

-82.12%

Number of package files

9

-57.14%

Lines of code

128

-83%

No dependency changes