1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6144],{56125:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guide/examples/integrating-with-preact",function(){return t(82812)}])},64236:function(e,n,t){"use strict";t.d(n,{B:function(){return g}});var a=t(70603),r=t(85893),i=t(67294),o=t(41664),s=t.n(o),l=t(13145),m=t(72478),d=t(15251),c=function(){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",height:"24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsxs)("g",{transform:"matrix(1,0,0,1,0,0)",children:[(0,r.jsx)("path",{d:"M11.736,5a1,1,0,0,1-.894-.553L9.894,2.553A1,1,0,0,0,9,2H1.5a1,1,0,0,0-1,1V21a1,1,0,0,0,1,1h21a1,1,0,0,0,1-1V6a1,1,0,0,0-1-1Z",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"}),(0,r.jsx)("path",{d:"M14.5 9.5L18 13 14.5 16.5",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"}),(0,r.jsx)("path",{d:"M9.5 9.5L6 13 9.5 16.5",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"})]})})},p=function(){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",height:"24",width:"24",xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsxs)("g",{transform:"matrix(1,0,0,1,0,0)",children:[(0,r.jsx)("path",{d:"M13.5,14a2,2,0,0,0,2,2h5a3.008,3.008,0,0,0,3-3V11a3.009,3.009,0,0,0-3-3h-5a2,2,0,0,0-2,2",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"}),(0,r.jsx)("path",{d:"M10.5,14a2,2,0,0,1-2,2h-5a3.008,3.008,0,0,1-3-3V11a3.009,3.009,0,0,1,3-3h5a2,2,0,0,1,2,2",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"}),(0,r.jsx)("path",{d:"M6.5 11.999L17.5 11.999",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"})]})})},u=t(70505),g=function(e){var n=e.setFrameHeight,t=e.title,o=void 0===t?"":t,g=e.url,h=g.replace("/demo/","http://web.archive.org/web/20231010143807/https://github.com/form-validation/examples/blob/master/"),f=(0,a.Z)(i.useState(""),2),k=f[0],v=f[1],b=(0,a.Z)(i.useState(!1),2),j=b[0],w=b[1];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l.Spacer,{size:"small"}),(0,r.jsx)(l.Window,{title:o,children:(0,r.jsxs)("div",{className:"demo",children:[(0,r.jsx)("div",{className:"demo__frame",children:(0,r.jsx)(d.Z,{setFrameHeight:n,url:g})}),(0,r.jsxs)("div",{className:"demo__toolbar",children:[(0,r.jsx)("button",{className:"demo__button",type:"button",onClick:function(){w(!j),k||fetch(g).then((function(e){return e.text()})).then((function(e){return v(e)}))},children:(0,r.jsx)(c,{})}),(0,r.jsx)(s(),{href:h,children:(0,r.jsx)("a",{className:"demo__button",target:"blank",rel:"noopener noreferrer",children:(0,r.jsx)(p,{})})})]}),(0,r.jsxs)("div",{className:(0,m.A)({demo__code:!0,"demo__code--opened":j}),children:[!k&&(0,r.jsx)("div",{className:"demo__code-loader",children:(0,r.jsx)(l.Spinner,{})}),k&&(0,r.jsx)("div",{className:"demo__code-body",children:(0,r.jsx)(u.Z,{className:"lang-html",children:k})})]})]})}),(0,r.jsx)(l.Spacer,{size:"small"})]})}},87835:function(e,n,t){"use strict";var a=t(85893),r=(t(67294),t(13145)),i=t(26811);n.Z=function(e){var n=e.children,t=e.title,o=e.secondaryTitle,s=void 0===o?"":o;return(0,a.jsxs)(i.Z,{title:t,children:[(0,a.jsx)("div",{className:"block-container",children:(0,a.jsxs)("div",{className:"block-hero",children:[(0,a.jsx)(r.Spacer,{size:"large"}),(0,a.jsx)(r.Heading,{level:1,children:t}),s&&(0,a.jsx)("div",{className:"block-hero__heading--secondary",children:s})]})}),(0,a.jsxs)("div",{className:"block-container",children:[n,(0,a.jsx)(r.Spacer,{size:"large"})]})]})}},82812:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return l}});var a=t(99534),r=(t(67294),t(3905)),i=(t(64236),t(87835)),o={},s=function(e){var n=e.children;return(0,r.kt)(i.Z,{title:"Integrating with Preact"},n)};function l(e){var n=e.components,t=(0,a.Z)(e,["components"]);return(0,r.kt)(s,Object.assign({},o,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"This page will help you integrate FormValidation with the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"http://web.archive.org/web/20231010143807/https://preactjs.com"}),"Preact library"),". For the sake of simplicity, we are about to validate a simple login form with just two fields to input the username and password:"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),'<form id="loginForm" method="POST">\n <div class="form-group row">\n <label class="col-sm-3 col-form-label">Username</label>\n <div class="col-sm-4">\n <input type="text" class="form-control" name="username" />\n </div>\n </div>\n\n <div class="form-group row">\n <label class="col-sm-3 col-form-label">Password</label>\n <div class="col-sm-4">\n <input type="password" class="form-control" name="password" />\n </div>\n </div>\n\n <div class="form-group row">\n <div class="col-sm-9 offset-sm-3">\n <button type="submit" class="btn btn-primary">Login</button>\n </div>\n </div>\n</form>\n')),(0,r.kt)("h3",null,"Bundling the library"),(0,r.kt)("p",null,"First of all, you need to look at the following guide to see how we can bundle FormValidation with popular bundlers:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/bundling-with-rollup"}),"Bundling with Rollup")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/bundling-with-webpack"}),"Bundling with Webpack"))),(0,r.kt)("h3",null,"Creating a FormValidation instance"),(0,r.kt)("p",null,"The best place to initialize a FormValidation instance is inside the component's ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"http://web.archive.org/web/20231010143807/https://preactjs.com/guide/api-reference#lifecycle-methods"}),"componentDidMount event"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-js"}),"import { Component } from 'preact';\nimport { formValidation } from '@form-validation/bundle/popular';\n\nclass LoginForm extends Component {\n render() {\n return (\n // Render the form ...\n );\n }\n\n componentDidMount() {\n // Create a FormValidation instance\n this.fv = formValidation(document.getElementById('loginForm'), {\n fields: {\n username: {\
1n validators: {\n notEmpty: {\n message: 'The username is required'\n },\n stringLength: {\n min: 6,\n max: 30,\n message: 'The username must be more than 6 and less than 30 characters long',\n },\n regexp: {\n regexp: /^[a-zA-Z0-9_]+$/,\n message: 'The username can only consist of alphabetical, number and underscore',\n },\n }\n },\n password: {\n validators: {\n notEmpty: {\n message: 'The password is required'\n },\n stringLength: {\n min: 8,\n message: 'The password must have at least 8 characters',\n },\n }\n },\n },\n plugins: {\n ...\n },\n });\n }\n}\n")),(0,r.kt)("h3",null,"Using the plugins"),(0,r.kt)("p",null,"In order to use the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/plugins"}),"plugins"),", we need to import them:"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-js"}),"import { Component } from 'preact';\nimport { formValidation } from '@form-validation/bundle/popular';\n\n// FormValidation plugins\nimport { Icon } from '@form-validation/plugin-icon';\nimport { Trigger } from '@form-validation/plugin-trigger';\nimport { Bootstrap } from '@form-validation/plugin-bootstrap';\nimport { SubmitButton } from '@form-validation/plugin-submit-button';\n\nclass LoginForm extends Component {\n componentDidMount() {\n this.fv = formValidation(document.getElementById('loginForm'), {\n fields: {\n ...\n },\n plugins: {\n trigger: new Trigger(),\n bootstrap: new Bootstrap(),\n icon: new Icon({\n valid: 'fa fa-check',\n invalid: 'fa fa-times',\n validating: 'fa fa-refresh'\n }),\n submitButton: new SubmitButton(),\n },\n });\n }\n}\n")),(0,r.kt)("p",null,"Now the FormValidation instance is ready, you can listen on the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/events"}),"events")," or call ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/api"}),"API"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-js"}),"// Listen on event\nthis.fv.on('core.field.invalid', (e) => {\n ...\n});\n\n// Call API\nthis.fv.revalidateField('...');\n")),(0,r.kt)("h3",null,"Registering validator"),(0,r.kt)("p",null,"You don't need to follow this section if you are using a ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/validators#popular-validators"}),"popular validator"),". The popular validator is ready when you import the FormValidation's core:"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-js"}),"import { formValidation } from '/path/to/@form-validation/cjs/bundle/popular';\n")),(0,r.kt)("p",null,"In the other cases, you have to use the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/api/register-validator"}),"registerValidator() method")," to let the library knows where it can find a ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/validators#special-validators"}),"special")," or ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/examples/creating-a-custom-validator"}),"custom validator"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-js"}),"import { Component } from 'preact';\n\n// Import an external validator\nimport { phone } from '@form-validation/validator-phone';\n\n// Or import your own validator\nimport strongPassword from '/path/to/your/strongPassword';\n\nclass LoginForm extends Component {\n componentDidMount() {\n this.fv = formValidation(document.getElementById('loginForm'), {\n fields: {\n phoneNumber: {\n validators: {\n phone: { ... }\n }\n },\n password: {\n validators: {\n checkPassword: { ... }\n }\n },\n },\n });\n\n // Register validators\n this.fv.registerValidator('phone', phone)\n .registerValidator('checkPassword', strongPassword);\n }\n}\n")),(0,r.kt)("h3",null,"Destroying FormValidation instance"),(0,r.kt)("p",null,"Preact component triggers the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"http://web.archive.org/web/20231010143807/https://preactjs.com/guide/api-reference#lifecycle-methods"}),"componentWillUnmount event")," when it's removed from page or not used anymore. It's the time to destroy our FormV
1alidation instance by using the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/api/destroy"}),"destroy() method"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-js"}),"import { Component } from 'preact';\n\nclass LoginForm extends Component {\n componentWillUnmount() {\n if (this.fv) {\n this.fv.destroy();\n }\n }\n}\n")),(0,r.kt)("h3",null,"See also"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/bundling-with-rollup"}),"Bundling with Rollup")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/bundling-with-webpack"}),"Bundling with Webpack")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/integrating-with-inferno"}),"Integrating with Inferno")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/integrating-with-mithril"}),"Integrating with Mithril")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/integrating-with-redom"}),"Integrating with RE:DOM")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/integrating-with-react"}),"Integrating with React")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/integrating-with-riot"}),"Integrating with Riot")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/integrating-with-svelte"}),"Integrating with Svelte")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/integrating-with-vue"}),"Integrating with Vue"))))}l.isMDXComponent=!0},99534:function(e,n,t){"use strict";function a(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)t=i[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)t=i[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}t.d(n,{Z:function(){return a}})}},function(e){e.O(0,[3582,9774,2888,179],(function(){return n=56125,e(e.s=n);var n}));var n=e.O();_N_E=n}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.