Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-form-validator-component
Advanced tools
react-form-validator-component - npm Package Compare versions
Comparing version 1.4.3 to 1.4.4
@@ -1,1 +0,1 @@ | ||
| !function(e,t){for(var r in t)e[r]=t[r]}(exports,function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,o=/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5}){1,25}(,[ ]{0,1}([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5}){1,25})*$/,a=/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/,i=/^[+]?(\d{1,3})\s?(\d{10})$/,u=/^(([A-Za-z0-9]{2,4})\s?([A-Za-z0-9]{1,5})?)?$/,l={validator:function(e){return!!e.match(a)},error:"Please provide a full name"},s={validator:function(e){return!!e.match(n)},error:"Please provide a valid email address"},c={validator:function(e){return!!e.match(o)},error:"Please provide a valid email address, or several emails comma delimited"},d={validator:function(e){return!!e.match(i)},error:"Please provide a valid UK phone number"},f={validator:function(e){return!!e.match(u)},error:"Please provide a valid UK postcode"};t.isRequired={validator:function(e){return!!e},error:"Please provide a value"},t.isEmail=s,t.isEmailArray=c,t.isFullName=l,t.isPhoneNumber=d,t.isPostcode=f},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";var n=r(1);function o(){}e.exports=function(){function e(e,t,r,o,a,i){if(i!==n){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=o,r.PropTypes=r,r}},function(e,t,r){e.exports=r(2)()},function(e,t){e.exports=require("react")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw a}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),a=l(r(4)),i=l(r(3)),u=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(r(0));function l(e){return e&&e.__esModule?e:{default:e}}function s(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var d=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.onValidate=function(e,t){r.props.parent.setState(c({},e,t))},r.toArray=function(e){return Object.entries(e).reduce(function(e,t){var r=n(t,2),o=r[0],a=r[1];return e.concat({key:o,value:a})},[])},r.addToStateProperty=function(e,t){r.setState(c({},e,Object.assign(r.state[e],t)))},r.removeError=function(e,t){var n=r.state.errors[e],o=n.indexOf(t);o>-1&&n.splice(o,1),r.addToStateProperty("errors",c({},e,n))},r.removeAllErrors=function(e){console.log("removing all errors"),r.setState({errors:Object.assign(r.state.errors,c({},e,[]))},function(){return console.log("error removed")})},r.updateErrorsForField=function(e,t,n){e?r.removeError(t,n):r.addToStateProperty("errors",c({},t,[].concat(s(new Set([].concat(s(r.state.errors[t]||[]),[n]))))))},r.validateRules=function(e,t,n){return n.includes("isRequired")||""!==t?n.reduce(function(n,o){var a=u[o]||o,i=a.validator(t);return r.updateErrorsForField(i,e,a.error),n&&i},!0):(r.removeAllErrors(e),!0)},r.validateField=function(e,t){var n=r.state.fields[e].rules,o=r.validateRules(e,t,n);return console.log(o),r.setState({validation:Object.assign(r.state.validation,c({},e,o))}),o},r.checkGroupValid=function(e,t,n){return e.some(function(e){return!!e.rules.reduce(function(e,o){var a=u[o]||o,i=a.validator(n);return r.updateErrorsForField(i,t,a.error),e&&i},!0)})},r.validateGroup=function(e,t){var n=r.state.fields[e],o=Object.values(r.state.fields).filter(function(e){return e.required===n.required});r.setState({validation:Object.assign(r.state.validation,c({},n.required,!1))});var a=r.checkGroupValid(o,e,t);return a&&r.setState({validation:Object.assign(r.state.validation,c({},n.required,!0))}),a},r.validateFormAndUpdateState=function(){Object.values(r.props.fields).map(function(e){return e.name}).forEach(function(e){var t=document.getElementsByName(e)[0]?document.getElementsByName(e)[0].value:"";t&&r.validateFieldAndUpdateState(e,t)})},r.onChange=function(e){r.validateFieldAndUpdateState(e.target.name,e.target.value)},r.state={fields:e.fields,errors:Object.keys(e.fields).reduce(function(e,t){return e[t]=[],e},{}),validation:Object.keys(e.fields).reduce(function(t,r){var n=e.fields[r];return n.required&&"string"==typeof n.required?(t[n.required]=!1,t):(t[r]=!(n.rules&&n.rules.length>0),t)},{}),isFormValid:!1},r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,a.default.Component),o(t,[{key:"validateFieldAndUpdateState",value:function(e,t){var r=this.props.fields[e].onValidate||this.props.onValidate||this.onValidate;"string"==typeof this.props.fields[e].required?this.validateGroup(e,t)?r(e,t):r(e,null):this.validateField(e,t)?r(e,t):r(e,null),this.setState({isFormValid:Object.values(this.state.validation).every(function(e){return e})})}},{key:"componentDidMount",value:function(){this.props.validateOnLoad&&this.validateFormAndUpdateState()}},{key:"render",value:function(){var e=this.state,t=e.fields,r=e.errors,n=e.isFormValid,o=e.validation;return this.props.children({isFormValid:n,isFieldValid:o,fields:this.toArray(t),onChange:this.onChange,errors:r})}}]),t}();t.default=d,d.propTypes={parent:i.default.object,children:i.default.func,onValidate:i.default.func,fields:i.default.object,validateOnLoad:i.default.bool}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Validator=void 0;var n=function(e){return e&&e.__esModule?e:{default:e}}(r(5));t.Validator=n.default}])); | ||
| !function(e,t){for(var r in t)e[r]=t[r]}(exports,function(e){var t={};function r(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(a,n,function(t){return e[t]}.bind(null,n));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,n=/^([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5}){1,25}(,[ ]{0,1}([a-zA-Z0-9_\-.]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,5}){1,25})*$/,o=/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/,i=/^[+]?(\d{1,3})\s?(\d{10})$/,u=/^(([A-Za-z0-9]{2,4})\s?([A-Za-z0-9]{1,5})?)?$/,l=/^(\d{2}(\s|[-])\d{2}(\s|[-])\d{2}$)|\d{6}|^$/,s=/^((([A-Za-z]{6}[0-9A-Za-z]{2})|([A-Za-z]{4}(\s|-)?[A-Za-z]{2}(\s|-)?[0-9A-Za-z]{2}))[0-9A-Za-z]{3}?$)|^$/,d=/^([0-9A-Za-z]{4}\s?){4,6}([0-9A-Za-z]{1,4}|[0-9A-Za-z]{4}\s?[0-9A-Za-z]{1|4})?$/,c=/^\d{8,15}$/,f=/^[A-Z0-9a-z\-/\s]+$/i,p=/^-?\d*[.]?\d+$/,v=/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/g,h={validator:function(e){return!!e.match(o)},error:"Please provide a full name"},m={validator:function(e){return!!e.match(a)},error:"Please provide a valid email address"},y={validator:function(e){return!!e.match(n)},error:"Please provide a valid email address, or several emails comma delimited"},b={validator:function(e){return!!e.match(i)},error:"Please provide a valid UK phone number"},O={validator:function(e){return!!e.match(u)},error:"Please provide a valid UK postcode"},g={validator:function(e){return!!e.match(l)},error:"Please provide a UK Sort Code"},A={validator:function(e){return!!e.match(s)},error:"Please provide a valid Swift Code"},P={validator:function(e){return!!e.match(d)},error:"Please provide a valid Swift Code"},_={validator:function(e){return!!e.match(c)},error:"Please provide a valid UK VAT Number"},j={validator:function(e){return!!e.match(f)},error:"Please provide an alphanumeric input"},S={validator:function(e){return"number"==typeof e||!!e.match(p)},error:"Please provide an numeric input"},z={validator:function(e){return!!e.match(v)},error:"Please provide a valid URL"},w={validator:function(e,t){return e.length===t},error:"Please provide an input of exactly "+length+" characters"},Z={validator:function(e,t){return e.length<=t},error:"The maximum length of this input is "+length+" characters"},E={validator:function(e,t){return e.length>=t},error:"The minimum length of this input is "+length+" characters"};t.isRequired={validator:function(e){return!!e},error:"Please provide a value"},t.isEmail=m,t.isEmailArray=y,t.isFullName=h,t.isPhoneNumber=b,t.isPostCode=O,t.isSortCode=g,t.isSwiftCode=A,t.isIban=P,t.isVatNumber=_,t.isAlphaNumeric=j,t.isNumeric=S,t.isUrl=z,t.isLength=w,t.maxLength=Z,t.minLength=E},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";var a=r(1);function n(){}e.exports=function(){function e(e,t,r,n,o,i){if(i!==a){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){e.exports=r(2)()},function(e,t){e.exports=require("react")},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],a=!0,n=!1,o=void 0;try{for(var i,u=e[Symbol.iterator]();!(a=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);a=!0);}catch(e){n=!0,o=e}finally{try{!a&&u.return&&u.return()}finally{if(n)throw o}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),n=function(){function e(e,t){for(var r=0;r<t.length;r++){var a=t[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,r,a){return r&&e(t.prototype,r),a&&e(t,a),t}}(),o=l(r(4)),i=l(r(3)),u=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(r(0));function l(e){return e&&e.__esModule?e:{default:e}}function s(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var c=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.onValidate=function(e,t){r.props.parent.setState(d({},e,t))},r.toArray=function(e){return Object.entries(e).reduce(function(e,t){var r=a(t,2),n=r[0],o=r[1];return e.concat({key:n,value:o})},[])},r.addToStateProperty=function(e,t){r.setState(d({},e,Object.assign(r.state[e],t)))},r.removeError=function(e,t){var a=r.state.errors[e],n=a.indexOf(t);n>-1&&a.splice(n,1),r.addToStateProperty("errors",d({},e,a))},r.removeAllErrors=function(e){r.setState({errors:Object.assign(r.state.errors,d({},e,[]))})},r.updateErrorsForField=function(e,t,a){e?r.removeError(t,a):r.addToStateProperty("errors",d({},t,[].concat(s(new Set([].concat(s(r.state.errors[t]||[]),[a]))))))},r.validateRules=function(e,t,a){return a.reduce(function(a,n){var o=u[n]||n,i=o.validator(t);return r.updateErrorsForField(i,e,o.error),a&&i},!0)},r.validateField=function(e,t){if(!r.props.fields[e].required&&0===t.length)return r.setState({validation:Object.assign(r.state.validation,d({},e,!0))}),!0;var a=r.state.fields[e].rules,n=r.validateRules(e,t,a);return r.setState({validation:Object.assign(r.state.validation,d({},e,n))}),n},r.checkGroupValid=function(e,t,a){return e.some(function(e){return!!e.rules.reduce(function(e,n){var o=u[n]||n,i=o.validator(a);return r.updateErrorsForField(i,t,o.error),e&&i},!0)})},r.validateGroup=function(e,t){var a=r.state.fields[e],n=Object.values(r.state.fields).filter(function(e){return e.required===a.required});r.setState({validation:Object.assign(r.state.validation,d({},a.required,!1))});var o=r.checkGroupValid(n,e,t);return o&&r.setState({validation:Object.assign(r.state.validation,d({},a.required,!0))}),o},r.validateFormAndUpdateState=function(){Object.values(r.props.fields).map(function(e){return e.name}).forEach(function(e){var t=document.getElementsByName(e)[0]&&document.getElementsByName(e)[0].value?document.getElementsByName(e)[0].value:"";r.validateFieldAndUpdateState(e,t)})},r.onChange=function(e){r.validateFieldAndUpdateState(e.target.name,e.target.value)},r.state={fields:e.fields,errors:Object.keys(e.fields).reduce(function(e,t){return e[t]=[],e},{}),validation:Object.keys(e.fields).reduce(function(t,r){var a=e.fields[r];return a.required&&"string"==typeof a.required?(t[a.required]=!1,t):(t[r]=!(a.rules&&a.rules.length>0),t)},{}),isFormValid:!1},r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,o.default.Component),n(t,[{key:"validateFieldAndUpdateState",value:function(e,t){var r=this.props.fields[e].onValidate||this.props.onValidate||this.onValidate;"string"==typeof this.props.fields[e].required?this.validateGroup(e,t)?r(e,t):r(e,null):this.validateField(e,t)?r(e,t):r(e,null),this.setState({isFormValid:Object.values(this.state.validation).every(function(e){return e})})}},{key:"componentDidMount",value:function(){var e=this;this.validateFormAndUpdateState(),this.props.validateOnLoad&&Object.values(this.props.fields).map(function(t){return e.removeAllErrors(t.name)})}},{key:"render",value:function(){var e=this.state,t=e.fields,r=e.errors,a=e.isFormValid,n=e.validation;return this.props.children({isFormValid:a,isFieldValid:n,fields:this.toArray(t),onChange:this.onChange,errors:r})}}]),t}();t.default=c,c.propTypes={parent:i.default.object,children:i.default.func,onValidate:i.default.func,fields:i.default.object,validateOnLoad:i.default.bool},c.defaultProps={validateOnLoad:!0}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Validator=void 0;var a=function(e){return e&&e.__esModule?e:{default:e}}(r(5));t.Validator=a.default}])); |
| { | ||
| "name": "react-form-validator-component", | ||
| "version": "1.4.3", | ||
| "version": "1.4.4", | ||
| "main": "build/lib/index.js", | ||
@@ -5,0 +5,0 @@ "repository": "git@github.com:JDLT-Ltd/react-form-validator-component.git", |
@@ -104,3 +104,4 @@ # React Form Validator | ||
| * `validateOnLoad` - a boolean | ||
| If `validateOnLoad` is true, `Validator` will attempt to validate every field that is prepopulated on `componentDidMount`. (empty fields will not dsiplay errors - however they will prevent set isFormValid to false) | ||
| By defautl `Validator` will attempt to validate every field that is prepopulated on `componentDidMount`. (empty fields will not dsiplay errors - however they will prevent set isFormValid to false). | ||
| If you want to avoid validation running on load, simply set the value to false. | ||
@@ -107,0 +108,0 @@ ### Rules in RFVC |
@@ -15,2 +15,3 @@ import React from 'react' | ||
| } | ||
| class App extends React.Component { | ||
@@ -32,2 +33,3 @@ constructor(props) { | ||
| rules: ['isPhoneNumber'], | ||
| required: true, | ||
| label: 'Something' | ||
@@ -37,2 +39,12 @@ } | ||
| renderErrors(errors) { | ||
| return errors.map((error, i) => { | ||
| return ( | ||
| <Label color="red" key={i}> | ||
| {error} | ||
| </Label> | ||
| ) | ||
| }) | ||
| } | ||
| render() { | ||
@@ -50,5 +62,3 @@ return ( | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {errors.emailAddresses.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
@@ -58,5 +68,3 @@ <Form.Field> | ||
| <Input name="something" onChange={onChange} /> | ||
| {errors.something.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
@@ -81,5 +89,3 @@ {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <input name={input.value.name} onChange={onChange} /> | ||
| {errors[input.value.name].map((error, i) => { | ||
| return <label key={i}>{error}</label> | ||
| })} | ||
| {this.renderErrors(errors[input.value.name])} | ||
| </div> | ||
@@ -103,5 +109,3 @@ ) | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {errors.emailAddresses.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
@@ -114,5 +118,3 @@ <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| <Input name="something" onChange={onChange} /> | ||
| {errors.something.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
@@ -137,5 +139,3 @@ <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| <Input name="emailAddresses" onChange={onChange} value={'I_DONT_WORK'} /> | ||
| {errors.emailAddresses.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
@@ -148,5 +148,3 @@ <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| <Input name="something" onChange={onChange} defaultValue={''} /> | ||
| {errors.something.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
@@ -175,5 +173,3 @@ <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {errors.emailAddresses.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
@@ -186,5 +182,3 @@ <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| <Input name="something" onChange={onChange} /> | ||
| {errors.something.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
@@ -191,0 +185,0 @@ <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> |
@@ -5,3 +5,10 @@ const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ | ||
| const phoneNumberRegex = /^[+]?(\d{1,3})\s?(\d{10})$/ | ||
| const postcodeRegex = /^(([A-Za-z0-9]{2,4})\s?([A-Za-z0-9]{1,5})?)?$/ | ||
| const postCodeRegex = /^(([A-Za-z0-9]{2,4})\s?([A-Za-z0-9]{1,5})?)?$/ | ||
| const sortCodeRegex = /^(\d{2}(\s|[-])\d{2}(\s|[-])\d{2}$)|\d{6}|^$/ | ||
| const swiftCodeRegex = /^((([A-Za-z]{6}[0-9A-Za-z]{2})|([A-Za-z]{4}(\s|-)?[A-Za-z]{2}(\s|-)?[0-9A-Za-z]{2}))[0-9A-Za-z]{3}?$)|^$/ | ||
| const ibanRegex = /^([0-9A-Za-z]{4}\s?){4,6}([0-9A-Za-z]{1,4}|[0-9A-Za-z]{4}\s?[0-9A-Za-z]{1|4})?$/ | ||
| const vatNumberRegex = /^\d{8,15}$/ | ||
| const alphaNumericRegex = /^[A-Z0-9a-z\-/\s]+$/i | ||
| const numericRegex = /^-?\d*[.]?\d+$/ | ||
| const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/g | ||
@@ -48,5 +55,5 @@ const isRequired = { | ||
| const isPostcode = { | ||
| const isPostCode = { | ||
| validator: data => { | ||
| if (data.match(postcodeRegex)) return true | ||
| if (data.match(postCodeRegex)) return true | ||
| return false | ||
@@ -57,2 +64,102 @@ }, | ||
| export { isRequired, isEmail, isEmailArray, isFullName, isPhoneNumber, isPostcode } | ||
| const isSortCode = { | ||
| validator: data => { | ||
| if (data.match(sortCodeRegex)) return true | ||
| return false | ||
| }, | ||
| error: 'Please provide a UK Sort Code' | ||
| } | ||
| const isSwiftCode = { | ||
| validator: data => { | ||
| if (data.match(swiftCodeRegex)) return true | ||
| return false | ||
| }, | ||
| error: 'Please provide a valid Swift Code' | ||
| } | ||
| const isIban = { | ||
| validator: data => { | ||
| if (data.match(ibanRegex)) return true | ||
| return false | ||
| }, | ||
| error: 'Please provide a valid Swift Code' | ||
| } | ||
| const isVatNumber = { | ||
| validator: data => { | ||
| if (data.match(vatNumberRegex)) return true | ||
| return false | ||
| }, | ||
| error: 'Please provide a valid UK VAT Number' | ||
| } | ||
| const isAlphaNumeric = { | ||
| validator: data => { | ||
| if (data.match(alphaNumericRegex)) return true | ||
| return false | ||
| }, | ||
| error: 'Please provide an alphanumeric input' | ||
| } | ||
| const isNumeric = { | ||
| validator: data => { | ||
| if (typeof data === 'number') { | ||
| return true | ||
| } | ||
| if (data.match(numericRegex)) return true | ||
| return false | ||
| }, | ||
| error: 'Please provide an numeric input' | ||
| } | ||
| const isUrl = { | ||
| validator: data => { | ||
| if (data.match(urlRegex)) return true | ||
| return false | ||
| }, | ||
| error: 'Please provide a valid URL' | ||
| } | ||
| const isLength = { | ||
| validator: (data, length) => { | ||
| if (data.length === length) return true | ||
| return false | ||
| }, | ||
| error: `Please provide an input of exactly ${length} characters` | ||
| } | ||
| const maxLength = { | ||
| validator: (data, length) => { | ||
| if (data.length <= length) return true | ||
| return false | ||
| }, | ||
| error: `The maximum length of this input is ${length} characters` | ||
| } | ||
| const minLength = { | ||
| validator: (data, length) => { | ||
| if (data.length >= length) return true | ||
| return false | ||
| }, | ||
| error: `The minimum length of this input is ${length} characters` | ||
| } | ||
| export { | ||
| isRequired, | ||
| isEmail, | ||
| isEmailArray, | ||
| isFullName, | ||
| isPhoneNumber, | ||
| isPostCode, | ||
| isSortCode, | ||
| isSwiftCode, | ||
| isIban, | ||
| isVatNumber, | ||
| isAlphaNumeric, | ||
| isNumeric, | ||
| isUrl, | ||
| isLength, | ||
| maxLength, | ||
| minLength | ||
| } |
@@ -58,4 +58,3 @@ import React from 'react' | ||
| removeAllErrors = fieldName => { | ||
| console.log('removing all errors') | ||
| this.setState({ errors: Object.assign(this.state.errors, { [fieldName]: [] }) }, () => console.log('error removed')) | ||
| this.setState({ errors: Object.assign(this.state.errors, { [fieldName]: [] }) }) | ||
| } | ||
@@ -72,6 +71,2 @@ | ||
| validateRules = (fieldName, fieldValue, fieldRules) => { | ||
| if (!fieldRules.includes('isRequired') && fieldValue === '') { | ||
| this.removeAllErrors(fieldName) | ||
| return true | ||
| } | ||
| return fieldRules.reduce((accumulator, fieldRule) => { | ||
@@ -88,6 +83,11 @@ const rule = defaultRules[fieldRule] || fieldRule | ||
| validateField = (fieldName, fieldValue) => { | ||
| if (!this.props.fields[fieldName].required && fieldValue.length === 0) { | ||
| this.setState({ | ||
| validation: Object.assign(this.state.validation, { [fieldName]: true }) | ||
| }) | ||
| return true | ||
| } | ||
| const fieldRules = this.state.fields[fieldName].rules | ||
| const isFieldValid = this.validateRules(fieldName, fieldValue, fieldRules) | ||
| console.log(isFieldValid) | ||
| this.setState({ | ||
@@ -148,7 +148,9 @@ validation: Object.assign(this.state.validation, { [fieldName]: isFieldValid }) | ||
| const fieldNames = Object.values(this.props.fields).map(field => field.name) | ||
| fieldNames.forEach(fieldName => { | ||
| const fieldValue = document.getElementsByName(fieldName)[0] ? document.getElementsByName(fieldName)[0].value : '' | ||
| let fieldValue = | ||
| document.getElementsByName(fieldName)[0] && document.getElementsByName(fieldName)[0].value | ||
| ? document.getElementsByName(fieldName)[0].value | ||
| : '' | ||
| if (fieldValue) this.validateFieldAndUpdateState(fieldName, fieldValue) | ||
| this.validateFieldAndUpdateState(fieldName, fieldValue) | ||
| }) | ||
@@ -162,3 +164,4 @@ } | ||
| componentDidMount() { | ||
| if (this.props.validateOnLoad) this.validateFormAndUpdateState() | ||
| this.validateFormAndUpdateState() | ||
| if (this.props.validateOnLoad) Object.values(this.props.fields).map(field => this.removeAllErrors(field.name)) | ||
| } | ||
@@ -185,1 +188,5 @@ | ||
| } | ||
| Validator.defaultProps = { | ||
| validateOnLoad: true | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.22%
325999
- Lines of code
- increased by18.97%
602
- Number of lines in readme file
- increased by0.5%
203
No dependency changes