a9bc01a8.c4d32864.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{104:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return f}));var a=t(0),r=t.n(a);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function d(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(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}var c=r.a.createContext({}),s=function(e){var n=r.a.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):d(d({},n),e)),t},u=function(e){var n=s(e.components);return r.a.createElement(c.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},b=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),u=s(t),b=a,f=u["".concat(o,".").concat(b)]||u[b]||p[b]||i;return t?r.a.createElement(f,d(d({ref:n},c),{},{components:t})):r.a.createElement(f,d({ref:n},c))}));function f(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var i=t.length,o=new Array(i);o[0]=b;var d={};for(var l in n)hasOwnProperty.call(n,l)&&(d[l]=n[l]);d.originalType=e,d.mdxType="string"==typeof e?e:a,o[1]=d;for(var c=2;c<i;c++)o[c]=t[c];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,t)}b.displayName="MDXCreateElement"},87:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return o})),t.d(n,"toc",(function(){return d})),t.d(n,"default",(function(){return c}));var a=t(3),r=(t(0),t(104));const i={id:"validation",title:"Validation",sidebar_label:"Validation",slug:"/validation"},o={unversionedId:"validation",id:"validation",isDocsHomePage:!1,title:"Validation",description:"You can add validations to each field and pass validations using options in the createFormModel API. Field validations can be defined in multiple ways.",source:"@site/docs/validation.md",slug:"/validation",permalink:"/docs/validation",editUrl:"https://github.com/formstjs/formst-docs/docs/validation.md",version:"current",sidebar_label:"Validation",sidebar:"someSidebar",previous:{title:"Getting Started",permalink:"/docs/"},next:{title:"Nested Forms",permalink:"/docs/nested"}},d=[{value:"Default way of adding validation",id:"default-way-of-adding-validation",children:[]},{value:"Adding validators",id:"adding-validators",children:[]},{value:"Custom function",id:"custom-function",children:[]}],l={toc:d};function c({components:e,...n}){return Object(r.b)("wrapper",Object(a.a)({},l,n,{components:e,mdxType:"MDXLayout"}),Object(r.b)("p",null,"You can add validations to each field and pass validations using options in the ",Object(r.b)("inlineCode",{parentName:"p"},"createFormModel")," API. Field validations can be defined in multiple ways."),Object(r.b)("h3",{id:"default-way-of-adding-validation"},"Default way of adding validation"),Object(r.b)("p",null,"Validations can be passed as an array. Currently, ",Object(r.b)("inlineCode",{parentName:"p"},"required"),", ",Object(r.b)("inlineCode",{parentName:"p"},"email")," and ",Object(r.b)("inlineCode",{parentName:"p"},"number")," are available by default."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-tsx"}),"const TodoForm = createFormModel(\n  'TodoForm',\n  {\n    title: types.string,\n    description: types.string,\n    user: types.string,\n  },\n  {\n    validation: {\n      title: 'required',\n      description: 'required',\n      user: ['required', 'email'],\n    },\n  },\n);\n")),Object(r.b)("h3",{id:"adding-validators"},"Adding validators"),Object(r.b)("p",null,"You can also add more validators:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{}),"defineValidators({\n  minLen: (value: any) => ({\n    valid: typeof value === 'string' && value.length > 3,\n    message: 'Input should be more than 3 characters',\n  })\n});\n")),Object(r.b)("h3",{id:"custom-function"},"Custom function"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{}),"const TodoForm = createFormModel(\n  'TodoForm',\n  {\n    title: types.string,\n    description: types.string,\n  },\n  {\n    validation: {\n      title: ['required'],\n      description: (value) => {\n        if(!value) return \"This is required field\";\n      },\n    },\n  }\n);\n")))}c.isMDXComponent=!0}}]);