cupcakearmy/formhero
1
0
Fork 0
mirror of https://github.com/cupcakearmy/formhero.git synced 2024-12-22 16:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add isValid example

Browse Source
This commit is contained in:
cupcakearmy 2019-09-28 20:14:02 +02:00
parent 34bcad56cc
commit e7e6e7c67d
3 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/errorsAndValidation.c34f3aec.js → docs/errorsAndValidation.6891c1b3.js
View File

@ -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)

2
docs/index.html
View File

@ -1,2 +1,2 @@
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Form Hero</title><style>body{padding:1em;margin:0;font-family:Courier New,Courier,monospace}section{text-align:center;max-width:25em;margin:1em auto;padding:1em;background-color:#f3f3f3;border-radius:.5em;box-shadow:0 8px 16px -16px rgba(0,0,0,.5)}input{font-size:1.25em;display:block;padding:.5em 1em;margin-top:.5em;border-radius:1em;width:100%;outline:none;border:.15em solid #fff}input:focus,input:hover{border-color:#31def5}input[type=submit]{cursor:pointer}input[type=checkbox]{display:inline;width:auto}</style></head><body> <section> <h3>Open the console to see the submitted data</h3> </section> <section id="simple"></section> <section id="errors"></section> <section id="select"></section> <section id="custom"></section> <script src="/formhero/simple.a7008172.js"></script> <script src="/formhero/errorsAndValidation.c34f3aec.js"></script> <script src="/formhero/select.fb8895c3.js"></script> <script src="/formhero/custom.6b7d60dc.js"></script>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Form Hero</title><style>body{padding:1em;margin:0;font-family:Courier New,Courier,monospace}section{text-align:center;max-width:25em;margin:1em auto;padding:1em;background-color:#f3f3f3;border-radius:.5em;box-shadow:0 8px 16px -16px rgba(0,0,0,.5)}input{font-size:1.25em;display:block;padding:.5em 1em;margin-top:.5em;border-radius:1em;width:100%;outline:none;border:.15em solid #fff}input:focus,input:hover{border-color:#31def5}input[type=submit]{cursor:pointer}input[type=checkbox]{display:inline;width:auto}</style></head><body> <section> <h3>Open the console to see the submitted data</h3> </section> <section id="simple"></section> <section id="errors"></section> <section id="select"></section> <section id="custom"></section> <script src="/formhero/simple.a7008172.js"></script> <script src="/formhero/errorsAndValidation.6891c1b3.js"></script> <script src="/formhero/select.fb8895c3.js"></script> <script src="/formhero/custom.6b7d60dc.js"></script>
</body></html>

9
examples/errorsAndValidation.tsx
View File

@ -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 (
<form>
<form onSubmit={(e) => {
e.preventDefault()
if (isValid) console.log(form)
}}>
<h1>Errors & Validation</h1>
@ -41,6 +44,8 @@ const Index: React.FC = () => {
<input {...auto('password')} placeholder="Password" type="password" />
{errors.password}
<input type="submit" />
</form>
)
}