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.3.2 to 1.4.0
@@ -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 a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,r),a.l=!0,a.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 a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));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,}))$/,a=/^([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={validator:function(e){return!!e.match(o)},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(a)},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 a(){}e.exports=function(){function e(e,t,r,a,o,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=a,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,a=!1,o=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){a=!0,o=e}finally{try{!n&&u.return&&u.return()}finally{if(a)throw o}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),a=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}}(),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 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),a=r[0],o=r[1];return e.concat({key:a,value:o})},[])},r.addToStateProperty=function(e,t){r.setState(c({},r.state[e],Object.assign(r.state[e],t)))},r.removeError=function(e,t){var n=r.state.errors[e],a=n.indexOf(t);a>-1&&n.splice(a,1),r.addToStateProperty("errors",c({},e,n))},r.updateErrors=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.validateField=function(e,t){var n=r.state.fields[e].rules.reduce(function(n,a){var o=u[a]||a,i=o.validator(t);return r.updateErrors(i,e,o.error),n&&i},!0);return r.setState({validation:Object.assign(r.state.validation,c({},e,n))}),n},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){return t[r]=!(e.fields[r].rules&&e.fields[r].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),a(t,[{key:"validateFieldAndUpdateState",value:function(e,t){var r=this.props.fields[e].onValidate||this.props.onValidate||this.onValidate;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,a=e.validation;return this.props.children({isFormValid:n,isFieldValid:a,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(n){if(t[n])return t[n].exports;var a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,r),a.l=!0,a.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 a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));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,}))$/,a=/^([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={validator:function(e){return!!e.match(o)},error:"Please provide a full name"},s={validator:function(e){return!!e.match(n)},error:"Please provide a valid email address"},d={validator:function(e){return!!e.match(a)},error:"Please provide a valid email address, or several emails comma delimited"},c={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=d,t.isFullName=l,t.isPhoneNumber=c,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 a(){}e.exports=function(){function e(e,t,r,a,o,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=a,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,a=!1,o=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){a=!0,o=e}finally{try{!n&&u.return&&u.return()}finally{if(a)throw o}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),a=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}}(),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=n(t,2),a=r[0],o=r[1];return e.concat({key:a,value:o})},[])},r.addToStateProperty=function(e,t){r.setState(d({},r.state[e],Object.assign(r.state[e],t)))},r.removeError=function(e,t){var n=r.state.errors[e],a=n.indexOf(t);a>-1&&n.splice(a,1),r.addToStateProperty("errors",d({},e,n))},r.updateErrorsForField=function(e,t,n){e?r.removeError(t,n):r.addToStateProperty("errors",d({},t,[].concat(s(new Set([].concat(s(r.state.errors[t]||[]),[n]))))))},r.validateRules=function(e,t,n){return n.reduce(function(n,a){var o=u[a]||a,i=o.validator(t);return r.updateErrorsForField(i,e,o.error),n&&i},!0)},r.validateField=function(e,t){var n=r.state.fields[e].rules,a=r.validateRules(e,t,n);return console.log(a),r.setState({validation:Object.assign(r.state.validation,d({},e,a))}),a},r.checkGroupValid=function(e,t,n){return e.some(function(e){return e.rules.reduce(function(e,a){var o=u[a]||a,i=o.validator(n);return r.updateErrorsForField(i,t,o.error),e&&i},!0)})},r.validateGroup=function(e,t){var n=r.state.fields[e],a=Object.values(r.state.fields).filter(function(e){return e.required===n.required});r.setState({validation:Object.assign(r.state.validation,d({},n.required,!1))});var o=r.checkGroupValid(a,e,t);return o&&r.setState({validation:Object.assign(r.state.validation,d({},n.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:"";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]=!(n.rules&&n.rules.length>0),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,o.default.Component),a(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,a=e.validation;return this.props.children({isFormValid:n,isFieldValid:a,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}},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}])); |
| { | ||
| "name": "react-form-validator-component", | ||
| "version": "1.3.2", | ||
| "version": "1.4.0", | ||
| "main": "build/lib/index.js", | ||
@@ -5,0 +5,0 @@ "repository": "git@github.com:JDLT-Ltd/react-form-validator-component.git", |
@@ -0,0 +0,0 @@ # React Form Validator |
| import React from 'react' | ||
| import reactDOM from 'react-dom' | ||
| import { Form, Header, Label, Input, Container } from 'semantic-ui-react' | ||
| import { Form, Header, Label, Input, Container, Button } from 'semantic-ui-react' | ||
| import { Validator } from '../lib/index' | ||
| // const inputMap = { | ||
| // input: props => <Input {...props} />, | ||
| // textArea: props => <TextArea {...props} /> | ||
| // } | ||
| //this is a custom rule | ||
| const isRequired = { | ||
@@ -22,14 +19,15 @@ validator: data => { | ||
| this.state = { | ||
| fields: { | ||
| emailAddresses: { | ||
| name: 'emailAddresses', | ||
| rules: ['isEmailArray', isRequired], | ||
| label: 'Email addresses' | ||
| }, | ||
| something: { | ||
| name: 'something', | ||
| label: 'Something' | ||
| } | ||
| } | ||
| this.state = {} | ||
| } | ||
| fields = { | ||
| emailAddresses: { | ||
| name: 'emailAddresses', | ||
| rules: ['isEmailArray'], | ||
| label: 'Email addresses' | ||
| }, | ||
| something: { | ||
| name: 'something', | ||
| rules: ['isEmailArray'], | ||
| label: 'Something' | ||
| } | ||
@@ -41,5 +39,6 @@ } | ||
| <Container> | ||
| <Header as="h1">Hello</Header> | ||
| <Validator fields={this.state.fields} parent={this} validateOnLoad> | ||
| {({ isValid, fields, onChange, errors }) => { | ||
| <Header as="h1">Examples for using RFVC</Header> | ||
| <Header as="h2">Basic Validation</Header> | ||
| <Validator fields={this.fields} parent={this}> | ||
| {({ isFormValid, onChange, errors }) => { | ||
| return ( | ||
@@ -49,3 +48,3 @@ <Form> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} value="test" /> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {errors.emailAddresses.map((error, i) => { | ||
@@ -62,11 +61,5 @@ return <Label key={i}>{error}</Label> | ||
| </Form.Field> | ||
| {fields.map(field => { | ||
| return ( | ||
| <Form.Field key={field.value.label}> | ||
| <label>{field.value.label}</label> | ||
| <Input name={field.key} onChange={onChange} /> | ||
| </Form.Field> | ||
| ) | ||
| })} | ||
| {isValid && <span>Form is valid</span>} | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <Button disabled={!isFormValid}>Test</Button> | ||
| </Form> | ||
@@ -76,2 +69,126 @@ ) | ||
| </Validator> | ||
| <Header as={'h2'}>Basic Validation using fields to map (and no semantic-ui)</Header> | ||
| <Validator fields={this.fields} parent={this}> | ||
| {({ isFormValid, fields, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| {fields && | ||
| fields.map((input, i) => { | ||
| return ( | ||
| <div key={i}> | ||
| <label>{input.value.label}</label> | ||
| <input name={input.value.name} onChange={onChange} /> | ||
| {errors[input.value.name].map((error, i) => { | ||
| return <label key={i}>{error}</label> | ||
| })} | ||
| </div> | ||
| ) | ||
| })} | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using isFieldValid</Header> | ||
| <Validator fields={this.fields} parent={this}> | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {errors.emailAddresses.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} /> | ||
| {errors.something.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using validateOnLoad and isFieldValid</Header> | ||
| <Validator fields={this.fields} parent={this} validateOnLoad> | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} value={'I_DONT_WORK'} /> | ||
| {errors.emailAddresses.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} defaultValue={''} /> | ||
| {errors.something.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using a custom onValidate handler</Header> | ||
| <Validator | ||
| fields={this.fields} | ||
| onValidate={(fieldName, fieldValue) => this.setState({ hidden: fieldValue })} | ||
| validateOnLoad | ||
| > | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {errors.emailAddresses.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} /> | ||
| {errors.something.map((error, i) => { | ||
| return <Label key={i}>{error}</Label> | ||
| })} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| </Container> | ||
@@ -78,0 +195,0 @@ ) |
| import Validator from './Validator' | ||
| export { Validator } |
@@ -0,0 +0,0 @@ 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,}))$/ |
@@ -16,5 +16,11 @@ import React from 'react' | ||
| validation: Object.keys(props.fields).reduce((accumulator, currentValue) => { | ||
| accumulator[currentValue] = | ||
| props.fields[currentValue].rules && props.fields[currentValue].rules.length > 0 ? false : true | ||
| return accumulator | ||
| //check for groups before adding fields to validation | ||
| const fieldValue = props.fields[currentValue] | ||
| if (fieldValue.required && typeof fieldValue.required === 'string') { | ||
| accumulator[fieldValue.required] = fieldValue.rules && fieldValue.rules.length > 0 ? false : true | ||
| return accumulator | ||
| } else { | ||
| accumulator[currentValue] = fieldValue.rules && fieldValue.rules.length > 0 ? false : true | ||
| return accumulator | ||
| } | ||
| }, {}), | ||
@@ -52,3 +58,3 @@ isFormValid: false | ||
| updateErrors = (validation, fieldName, errorMessage) => { | ||
| updateErrorsForField = (validation, fieldName, errorMessage) => { | ||
| if (!validation) { | ||
@@ -61,26 +67,63 @@ this.addToStateProperty('errors', { | ||
| validateField = (fieldName, fieldValue) => { | ||
| const fieldRules = this.state.fields[fieldName].rules | ||
| const isFormValid = fieldRules.reduce((accumulator, fieldRule) => { | ||
| validateRules = (fieldName, fieldValue, fieldRules) => { | ||
| return fieldRules.reduce((accumulator, fieldRule) => { | ||
| const rule = defaultRules[fieldRule] || fieldRule | ||
| const validation = rule.validator(fieldValue) | ||
| this.updateErrors(validation, fieldName, rule.error) | ||
| this.updateErrorsForField(validation, fieldName, rule.error) | ||
| return accumulator && validation | ||
| }, true) | ||
| } | ||
| validateField = (fieldName, fieldValue) => { | ||
| const fieldRules = this.state.fields[fieldName].rules | ||
| const isFieldValid = this.validateRules(fieldName, fieldValue, fieldRules) | ||
| console.log(isFieldValid) | ||
| this.setState({ | ||
| validation: Object.assign(this.state.validation, { [fieldName]: isFormValid }) | ||
| validation: Object.assign(this.state.validation, { [fieldName]: isFieldValid }) | ||
| }) | ||
| return isFormValid | ||
| return isFieldValid | ||
| } | ||
| checkGroupValid = (group, fieldName, fieldValue) => | ||
| group.some(field => field.rules.reduce((accumulator, fieldRule) => { | ||
| const rule = defaultRules[fieldRule] || fieldRule | ||
| const validation = rule.validator(fieldValue) | ||
| this.updateErrorsForField(validation, fieldName, rule.error) | ||
| return accumulator && validation | ||
| }, true)) | ||
| validateGroup = (fieldName, fieldValue) => { | ||
| const currentField = this.state.fields[fieldName] | ||
| const group = Object.values(this.state.fields).filter( | ||
| field => field.required === currentField.required | ||
| ) | ||
| this.setState({ validation: Object.assign(this.state.validation, { [currentField.required]: false }) }) | ||
| const isGroupValid = this.checkGroupValid(group, fieldName, fieldValue) | ||
| if (isGroupValid) | ||
| this.setState({ validation: Object.assign(this.state.validation, { [currentField.required]: true }) }) | ||
| return isGroupValid | ||
| } | ||
| validateFieldAndUpdateState(fieldName, fieldValue) { | ||
| const onValidate = this.props.fields[fieldName].onValidate || this.props.onValidate || this.onValidate | ||
| if (this.validateField(fieldName, fieldValue)) { | ||
| onValidate(fieldName, fieldValue) | ||
| // if this field is a member of a group | ||
| if (typeof this.props.fields[fieldName].required === 'string') { | ||
| if (this.validateGroup(fieldName, fieldValue)) { | ||
| onValidate(fieldName, fieldValue) | ||
| } else { | ||
| onValidate(fieldName, null) | ||
| } | ||
| } else { | ||
| onValidate(fieldName, null) | ||
| if (this.validateField(fieldName, fieldValue)) { | ||
| onValidate(fieldName, fieldValue) | ||
| } else { | ||
| onValidate(fieldName, null) | ||
| } | ||
| } | ||
@@ -87,0 +130,0 @@ |
@@ -0,0 +0,0 @@ const path = require("path"); |
@@ -0,0 +0,0 @@ const path = require('path'); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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 by0.14%
272754
- Lines of code
- increased by44.48%
497
No dependency changes