From e7e6e7c67d430e5652d50a8e018a8fd3fd4d0402 Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Sat, 28 Sep 2019 20:14:02 +0200 Subject: [PATCH] add isValid example --- ...ation.c34f3aec.js => errorsAndValidation.6891c1b3.js} | 2 +- docs/index.html | 2 +- examples/errorsAndValidation.tsx | 9 +++++++-- 3 files changed, 9 insertions(+), 4 deletions(-) rename docs/{errorsAndValidation.c34f3aec.js => errorsAndValidation.6891c1b3.js} (99%) diff --git a/docs/errorsAndValidation.c34f3aec.js b/docs/errorsAndValidation.6891c1b3.js similarity index 99% rename from docs/errorsAndValidation.c34f3aec.js rename to docs/errorsAndValidation.6891c1b3.js index bc11d2d..c045562 100644 --- a/docs/errorsAndValidation.c34f3aec.js +++ b/docs/errorsAndValidation.6891c1b3.js @@ -15,5 +15,5 @@ parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcel },{"./cjs/react-dom.production.min.js":"i17t"}],"Bzn5":[function(require,module,exports) { "use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=require("react");function t(e){return"Object"===e.constructor.name}exports.HTMLInputExtractor=(e=>e.currentTarget.value),exports.HTMLCheckboxExtractor=(e=>e.currentTarget.checked);const r=e=>`Error in ${e}`;exports.useForm=((s,c={},n={})=>{const[o,a]=e.useState(s),[u,i]=e.useState({}),[g,x]=e.useState(!0);e.useEffect(()=>{x(!Object.values(u).reduce((e,t)=>e||void 0!==t,!1))},[u]);const m=async(e,r)=>{const s=t(r)?r.validator:r;return"Function"===s.constructor.name?s(e):"AsyncFunction"===s.constructor.name?await s(e):"RegExp"===s.constructor.name&&s.test(e)},d=(e,s=n.extractor)=>n=>{const g=s?s(n):exports.HTMLInputExtractor(n);((e,t)=>{a(Object.assign(Object.assign({},o),{[e]:t}))})(e,g),((e,s)=>{const n=c[e];n&&(Array.isArray(n)?Promise.all(n.map(e=>m(s,e))).then(s=>{const c=s.indexOf(!1);i(Object.assign(Object.assign({},u),{[e]:-1===c?void 0:t(n[c])&&n[c].message?n[c].message:r(e)}))}):m(s,n).then(s=>{i(Object.assign(Object.assign({},u),{[e]:s?void 0:t(n)&&n.message?n.message:r(e)}))}))})(e,g)};return{form:o,update:d,auto:(e,t={})=>({[t.getter||n.getter||"onChange"]:d(e,t.extractor),[t.setter||n.setter||"value"]:o[e]}),errors:u,isValid:g}}); },{"react":"1n8/"}],"i5Ue":[function(require,module,exports) { -"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")),a=e(require("react-dom")),r=require("../"),s=()=>{const{auto:e,form:a,errors:s}=r.useForm({username:"",email:"",password:""},{username:e=>e.length>3,email:{validator:/@/,message:"Must contain an @"},password:[{validator:/[A-Z]/,message:"Must contain an uppercase letter"},{validator:/[\d]/,message:"Must contain a digit"}]});return t.default.createElement("form",null,t.default.createElement("h1",null,"Errors & Validation"),t.default.createElement("input",Object.assign({},e("username"),{placeholder:"Username"})),s.username&&"Must be longer than 3",t.default.createElement("input",Object.assign({},e("email"),{placeholder:"EMail"})),s.email,t.default.createElement("input",Object.assign({},e("password"),{placeholder:"Password",type:"password"})),s.password)};a.default.render(t.default.createElement(s,null),document.getElementById("errors")); +"use strict";var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("react")),a=e(require("react-dom")),r=require("../"),s=()=>{const{auto:e,form:a,errors:s,isValid:l}=r.useForm({username:"",email:"",password:""},{username:e=>e.length>3,email:{validator:/@/,message:"Must contain an @"},password:[{validator:/[A-Z]/,message:"Must contain an uppercase letter"},{validator:/[\d]/,message:"Must contain a digit"}]});return t.default.createElement("form",{onSubmit:e=>{e.preventDefault(),l&&console.log(a)}},t.default.createElement("h1",null,"Errors & Validation"),t.default.createElement("input",Object.assign({},e("username"),{placeholder:"Username"})),s.username&&"Must be longer than 3",t.default.createElement("input",Object.assign({},e("email"),{placeholder:"EMail"})),s.email,t.default.createElement("input",Object.assign({},e("password"),{placeholder:"Password",type:"password"})),s.password,t.default.createElement("input",{type:"submit"}))};a.default.render(t.default.createElement(s,null),document.getElementById("errors")); },{"react":"1n8/","react-dom":"NKHc","../":"Bzn5"}]},{},["i5Ue"], null) \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index eaa8b36..f4a4f42 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,2 +1,2 @@ -Form Hero

Open the console to see the submitted data

+Form Hero

Open the console to see the submitted data

\ No newline at end of file diff --git a/examples/errorsAndValidation.tsx b/examples/errorsAndValidation.tsx index 28b76c4..f69ee8f 100644 --- a/examples/errorsAndValidation.tsx +++ b/examples/errorsAndValidation.tsx @@ -5,7 +5,7 @@ import { useForm } from '../' const Index: React.FC = () => { - const { auto, form, errors } = useForm({ + const { auto, form, errors, isValid } = useForm({ username: '', email: '', password: '' @@ -28,7 +28,10 @@ const Index: React.FC = () => { }) return ( -
+ { + e.preventDefault() + if (isValid) console.log(form) + }}>

Errors & Validation

@@ -41,6 +44,8 @@ const Index: React.FC = () => { {errors.password} + +
) }