https://fandoro.com/_next/static/chunks/pages/components/pages/forms/form-validation-f0a6e3af94bd5d6d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4427],{23614:function(e,a,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/pages/forms/form-validation",function(){return l(56081)}])},56081:function(e,a,l){"use strict";l.r(a);var s=l(85893),i=l(67294),t=l(72867),r=l(34051),d=l(31555),n=l(52686),o=l(34289),c=l(35005),x=l(76515),m=l(37442),h=l(16310),j=l(23157),p=l(33272);let u=()=>{let[e,a]=(0,i.useState)(!1),l=e=>{let l=e.currentTarget;!1===l.checkValidity()&&(e.preventDefault(),e.stopPropagation()),a(!0)},u=[{value:".....",label:"....."}],Z=h.Ry().shape({firstName:h.Z_().required(),lastName:h.Z_().required(),username:h.Z_().required(),city:h.Z_().required(),state1:h.Z_().required(),zip:h.Z_().required(),file:h.nK().required(),terms:h.Xg().required().oneOf([!0],"terms must be accepted")}),b=[{value:"....",label:"...."}];return(0,s.jsxs)("div",{children:[(0,s.jsx)(p.Z,{title:"Form-Validations"}),(0,s.jsx)(t.Z,{titles:"Form-Validations",active:"Form-Validations",items:["Forms"]}),(0,s.jsxs)(r.Z,{children:[(0,s.jsx)(d.Z,{lg:12,md:12,children:(0,s.jsxs)(n.Z,{children:[(0,s.jsx)(n.Z.Header,{children:(0,s.jsx)(n.Z.Title,{as:"h3",children:"Cutom Validation"})}),(0,s.jsx)(n.Z.Body,{children:(0,s.jsxs)(o.Z,{noValidate:!0,validated:e,onSubmit:l,children:[(0,s.jsxs)("div",{className:"form-row",children:[(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"First name"}),(0,s.jsx)(o.Z.Control,{required:!0,type:"text",placeholder:"First name",defaultValue:"Mark"}),(0,s.jsx)(o.Z.Control.Feedback,{children:"Looks good!"})]}),(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"Last name"}),(0,s.jsx)(o.Z.Control,{required:!0,type:"text",placeholder:"Last name",defaultValue:"Otto"}),(0,s.jsx)(o.Z.Control.Feedback,{children:"Looks good!"})]})]}),(0,s.jsxs)("div",{className:"form-row",children:[(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"City"}),(0,s.jsx)(o.Z.Control,{type:"text",placeholder:"City",required:!0}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:" Please provide a valid city. "})]}),(0,s.jsxs)(d.Z,{xl:3,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"State"}),(0,s.jsx)(j.default,{classNamePrefix:"Select",options:[{value:".....",label:"....."}],placeholder:"State"}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:" Please provide a valid state."})]}),(0,s.jsxs)(d.Z,{xl:3,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"Zip"}),(0,s.jsx)(o.Z.Control,{type:"text",placeholder:"Zip",required:!0}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:"Please provide a valid zip."})]})]}),(0,s.jsx)(o.Z.Group,{className:"mb-3",children:(0,s.jsx)(o.Z.Check,{required:!0,label:"Agree to terms and conditions",feedback:"You must agree before submitting.",feedbackType:"invalid"})}),(0,s.jsx)(c.Z,{type:"submit",children:"Submit form"})]})})]})}),(0,s.jsx)(d.Z,{lg:12,md:12,children:(0,s.jsxs)(n.Z,{children:[(0,s.jsx)(n.Z.Header,{children:(0,s.jsx)(n.Z.Title,{as:"h3",children:"Default Validation"})}),(0,s.jsx)(n.Z.Body,{children:(0,s.jsxs)(o.Z,{children:[(0,s.jsxs)("div",{className:"form-row",children:[(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"First name"}),(0,s.jsx)(o.Z.Control,{required:!0,type:"text",placeholder:"First name",defaultValue:"Mark"})]}),(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"Last name"}),(0,s.jsx)(o.Z.Control,{required:!0,type:"text",placeholder:"Last name",defaultValue:"Otto"})]})]}),(0,s.jsxs)("div",{className:"form-row",children:[(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"City"}),(0,s.jsx)(o.Z.Control,{type:"text",placeholder:"City",required:!0})]}),(0,s.jsxs)(d.Z,{xl:3,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"State"}),(0,s.jsx)(j.default,{classNamePrefix:"Select",options:u,placeholder:"State"})]}),(0,s.jsxs)(d.Z,{xl:3,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"Zip"}),(0,s.jsx)(o.Z.Control,{type:"text",placeholder:"Zip",required:!0})]})]}),(0,s.jsx)(o.Z.Group,{children:(0,s.jsx)(o.Z.Check,{required:!0,label:"Agree to terms and conditions",feedbackType:"invalid"})}),(0,s.jsx)(c.Z,{className:"mt-3",type:"submit",children:"Submit form"})]})})]})}),(0,s.jsx)(d.Z,{lg:12,md:12,children:(0,s.jsxs)(n.Z,{children:[(0,s.jsx)(n.Z.Header,{children:(0,s.jsx)(n.Z.Title,{as:"h3",children:"Server Side Validation"})}),(0,s.jsx)(n.Z.Body,{children:(0,s.jsxs)(o.Z,{children:[(0,s.jsxs)("div",{className:"form-row",children:[(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"First name"}

1),(0,s.jsx)(o.Z.Control,{required:!0,isValid:!0,type:"text",placeholder:"First name",defaultValue:"Mark"}),(0,s.jsx)(o.Z.Control.Feedback,{children:"Looks good!"})]}),(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"Last name"}),(0,s.jsx)(o.Z.Control,{required:!0,isValid:!0,type:"text",placeholder:"Last name",defaultValue:"Otto"}),(0,s.jsx)(o.Z.Control.Feedback,{children:"Looks good!"})]})]}),(0,s.jsxs)("div",{className:"form-row",children:[(0,s.jsxs)(d.Z,{xl:6,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"City"}),(0,s.jsx)(o.Z.Control,{type:"text",placeholder:"City",required:!0,isInvalid:!0}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:" Please provide a valid city. "})]}),(0,s.jsxs)(d.Z,{xl:3,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"State"}),(0,s.jsx)(j.default,{classNamePrefix:"Select",options:u,placeholder:"State"}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:" Please provide a valid state."})]}),(0,s.jsxs)(d.Z,{xl:3,className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"Zip"}),(0,s.jsx)(o.Z.Control,{type:"text",placeholder:"Zip",required:!0,isInvalid:!0}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:"Please provide a valid zip."})]})]}),(0,s.jsx)(o.Z.Group,{children:(0,s.jsx)(o.Z.Check,{required:!0,isInvalid:!0,label:"Agree to terms and conditions",feedback:"You must agree before submitting.",feedbackType:"invalid"})}),(0,s.jsx)(c.Z,{type:"submit",children:"Submit form"})]})})]})}),(0,s.jsx)(d.Z,{lg:12,md:12,children:(0,s.jsxs)(n.Z,{children:[(0,s.jsx)(n.Z.Header,{children:(0,s.jsx)(n.Z.Title,{as:"h3",children:"Supported Elements"})}),(0,s.jsx)(n.Z.Body,{children:(0,s.jsxs)(o.Z,{className:"was-validated",children:[(0,s.jsxs)("div",{className:"mb-3",children:[(0,s.jsx)(o.Z.Label,{children:"Textarea"}),(0,s.jsx)(o.Z.Control,{as:"textarea",className:"is-invalid",id:"validationTextarea",placeholder:"Required example textarea",required:!0}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:"Please enter a message in the Textarea"})]}),(0,s.jsxs)("div",{className:"custom-control custom-checkbox mb-3",children:[(0,s.jsx)("input",{type:"checkbox",className:"custom-control-input",id:"customControlValidation1",required:!0}),(0,s.jsx)(o.Z.Label,{className:"custom-control-label",forhtml:"customControlValidation1",children:"Check this custom checkbox"}),(0,s.jsx)("div",{className:"invalid-feedback",children:"Example invalid feedback text"})]}),(0,s.jsxs)("div",{className:"custom-control custom-radio",children:[(0,s.jsx)("input",{type:"radio",className:"custom-control-input",id:"customControlValidation2",name:"radio-stacked",required:!0}),(0,s.jsx)(o.Z.Label,{className:"custom-control-label",forhtml:"customControlValidation2",children:"Toggle this custom radio"})]}),(0,s.jsxs)("div",{className:"custom-control custom-radio mb-3",children:[(0,s.jsx)("input",{type:"radio",className:"custom-control-input",id:"customControlValidation3",name:"radio-stacked",required:!0}),(0,s.jsx)("label",{className:"custom-control-label",children:"Or toggle this other custom radio"}),(0,s.jsx)("div",{className:"invalid-feedback",children:"More example invalid feedback text"})]}),(0,s.jsx)("div",{className:"mb-3",children:(0,s.jsxs)(x.Z,{hasValidation:!0,children:[(0,s.jsx)(x.Z.Text,{id:"validatedInputGroupPrepend",children:"@"}),(0,s.jsx)(o.Z.Control,{type:"text",required:!0,isInvalid:!0}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:" Example invalid input group feedback"})]})}),(0,s.jsx)("div",{className:"mb-3",children:(0,s.jsxs)(x.Z,{hasValidation:!0,className:"flex-nowrap",children:[(0,s.jsx)(x.Z.Text,{className:"py-2",id:"validatedInputGroupPrepend",children:"Option"}),(0,s.jsx)(j.default,{classNamePrefix:"Select",className:"w-94",options:[{value:"One",label:"One"},{value:"Two",label:"Two"},{value:"Three",label:"Three"},{value:"Four",label:"Four"}],placeholder:"Select"}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:" Example invalid input group feedback"})]})}),(0,s.jsxs)(x.Z,{className:"wasvalidated",children:[(0,s.jsx)(o.Z.Control,{type:"file",required:!0}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",children:"Example invalid input group feedback"})]})]})})]})}),(0,s.jsx)(d.Z,{lg:12,md:12,children:(0,s.jsxs)(n.Z,{children:[(0,s.jsx)(n.Z.Header,{children:(0,s.jsx)(n.Z.Title,{as:"h3",children:"Tooltips"})}),(0,s.jsx)(n.Z.Body,{children:(0,s.jsx)(m.J9,{validationSchema:Z,onSubmit:console.log,initialValues:{firstName:"Mark",lastName:"Otto",username:"",city:"",state1:"",zip:"",file:null,terms:!1},children:e=>{let{handleSubmit:a,handleChange:l,values:i,touched:t,errors:n}=e;return(0,s.jsxs)(o.Z,{noValidate:!0,onSubmit:a,children:[(0,s.jsxs)(r.Z,{className:"mb-3",children:[(0,s.jsxs)(o.Z.Group,{as:d.Z,md:"6",controlId:"val

1idationFormik101",className:"position-relative",children:[(0,s.jsx)(o.Z.Label,{children:"First name"}),(0,s.jsx)(o.Z.Control,{type:"text",name:"firstName",value:i.firstName,onChange:l,isValid:t.firstName&&!n.firstName}),(0,s.jsx)(o.Z.Control.Feedback,{tooltip:!0,children:"Looks good!"})]}),(0,s.jsxs)(o.Z.Group,{as:d.Z,md:"6",controlId:"validationFormik102",className:"position-relative",children:[(0,s.jsx)(o.Z.Label,{children:"Last name"}),(0,s.jsx)(o.Z.Control,{type:"text",name:"lastName",value:i.lastName,onChange:l,isValid:t.lastName&&!n.lastName}),(0,s.jsx)(o.Z.Control.Feedback,{tooltip:!0,children:"Looks good!"})]})]}),(0,s.jsxs)(r.Z,{className:"mb-3",children:[(0,s.jsxs)(o.Z.Group,{as:d.Z,md:"6",controlId:"validationFormik103",className:"position-relative",children:[(0,s.jsx)(o.Z.Label,{children:"City"}),(0,s.jsx)(o.Z.Control,{type:"text",placeholder:"City",name:"city",value:i.city,onChange:l,isInvalid:!!n.city}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",tooltip:!0,children:n.city})]}),(0,s.jsxs)(o.Z.Group,{as:d.Z,md:"3",controlId:"validationFormik104",className:"position-relative ",children:[(0,s.jsx)(o.Z.Label,{children:"state1"}),(0,s.jsx)(j.default,{classNamePrefix:"Select",options:b,placeholder:"state1"}),(0,s.jsxs)(o.Z.Control.Feedback,{type:"invalid",tooltip:!0,children:[" ",n.state1]})]}),(0,s.jsxs)(o.Z.Group,{as:d.Z,md:"3",controlId:"validationFormik105",className:"position-relative",children:[(0,s.jsx)(o.Z.Label,{children:"Zip"}),(0,s.jsx)(o.Z.Control,{type:"text",placeholder:"Zip",name:"zip",value:i.zip,onChange:l,isInvalid:!!n.zip}),(0,s.jsx)(o.Z.Control.Feedback,{type:"invalid",tooltip:!0,children:n.zip})]})]}),(0,s.jsx)(c.Z,{type:"submit",children:"Submit form"})]})}})})]})})]})]})};u.layout="Contentlayout",a.default=u},72867:function(e,a,l){"use strict";var s=l(85893);l(67294);var i=l(26699);let t=e=>(0,s.jsx)("div",{children:(0,s.jsxs)("div",{className:"page-header",children:[(0,s.jsx)("h1",{className:"page-title",children:e.titles}),(0,s.jsx)("div",{children:(0,s.jsxs)(i.Z,{children:[e.items.map((e,a)=>(0,s.jsx)(i.Z.Item,{href:"#!",children:e},a)),(0,s.jsx)(i.Z.Item,{href:"#!",active:!0,children:e.active})]})})]})});a.Z=t},33272:function(e,a,l){"use strict";l.d(a,{Z:function(){return n}});var s=l(85893);l(67294);var i=l(9008),t=l.n(i),r={src:"/_next/static/media/favicon.00e6795d.ico",height:16,width:16,blurWidth:0,blurHeight:0};let d=e=>{let{title:a}=e;return(0,s.jsxs)(t(),{children:[(0,s.jsx)("title",{children:" Fandoro Technologies - Making Businesses Responsible"}),(0,s.jsx)("link",{rel:"icon",href:r.src}),(0,s.jsx)("meta",{name:"description",content:"Fandoro Technologies - making businesses responsible"}),(0,s.jsx)("meta",{name:"author",content:"Fandoro Technologies Private Limited"}),(0,s.jsx)("meta",{name:"keywords",content:"next js dashboard template, admin dashboard nextjs, next js admin template, next js admin panel, admin dashboard, nextjs react bootstrap, react bootstrap with next js, next js admin dashboard, nextjs admin dashboard template, admin panel template, admin template react bootstrap, nextjs dashboard,next js react bootstrap"})]})};var n=d}},function(e){e.O(0,[917,6079,3157,131,8554,9774,2888,179],function(){return e(e.s=23614)}),_N_E=e.O()}]);