https://formvalidation.io/_next/static/chunks/pages/guide/examples…ajax-to-submit-the-form-790e27d92ad83795.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2889],{89703:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guide/examples/using-ajax-to-submit-the-form",function(){return t(24948)}])},26811:function(e,n,t){"use strict";t.d(n,{Z:function(){return p}});var a=t(85893),r=t(9008),i=t.n(r),s=t(67294),o=t(13145),l=function(){return(0,a.jsx)("footer",{className:"block-footer",children:(0,a.jsxs)("div",{className:"block-container",children:[(0,a.jsxs)(o.Footer,{children:[(0,a.jsxs)(o.FooterGroup,{title:"Documentations",children:[(0,a.jsx)(o.FooterLink,{href:"/guide/getting-started",children:"Getting Started"}),(0,a.jsx)(o.FooterLink,{href:"/guide/validators",children:"Validators"}),(0,a.jsx)(o.FooterLink,{href:"/guide/plugins",children:"Plugins"}),(0,a.jsx)(o.FooterLink,{href:"/guide/api",children:"API"}),(0,a.jsx)(o.FooterLink,{href:"/guide/events",children:"Events"}),(0,a.jsx)(o.FooterLink,{href:"/guide/examples",children:"Examples"})]}),(0,a.jsxs)(o.FooterGroup,{title:"",children:[(0,a.jsx)(o.FooterLink,{href:"/purchase",children:"Purchase"}),(0,a.jsx)(o.FooterLink,{href:"/license",children:"License"}),(0,a.jsx)(o.FooterLink,{href:"/updates",children:"Updates"}),(0,a.jsx)(o.FooterLink,{href:"/customers",children:"Customers"})]}),(0,a.jsxs)(o.FooterGroup,{title:"Products",children:[(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://blur.page",children:"Blur Page"}),(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://checkbrowsers.support",children:"Check Browsers Support"}),(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://intersectionobserver.io",children:"IntersectionObserver Examples"}),(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://react-pdf-viewer.dev",children:"React PDF Viewer"})]}),(0,a.jsxs)(o.FooterGroup,{title:"Open sources",children:[(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://1loc.dev",children:"1 LOC"}),(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://csslayout.io",children:"CSS Layout"}),(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://getfrontend.tips",children:"Front-end Tips"}),(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://htmldom.dev",children:"HTML DOM"}),(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://thisthat.dev",children:"this VS that"})]}),(0,a.jsxs)(o.FooterGroup,{title:"Follow us",children:[(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://github.com/form-validation",children:"GitHub"}),(0,a.jsx)(o.FooterLink,{href:"http://web.archive.org/web/20250107181843/https://twitter.com/nghuuphuoc",children:"Twitter"})]})]}),(0,a.jsxs)("div",{className:"block-footer__copyright",children:["\xa9 2013 \u2014 ",(new Date).getFullYear(),", Nguyen Huu Phuoc. All rights reserved."]})]})})},c=t(41664),d=t.n(c),h=t(11163),u={"css-tricks":"css-tricks-40",codrops:"codrops-40","jquery-plugins":"jquery-plugins-40",reddit:"reddit-30"},m=function(){var e=(0,h.useRouter)(),n=e.query&&e.query.ref,t=s.forwardRef((function(e,n){return(0,a.jsx)("a",{href:e.href,onClick:e.onClick,ref:n,children:(0,a.jsx)(o.Logo,{brand:"Form Validation"})})}));return(0,a.jsxs)("header",{className:"block-header",children:[n&&u[n]&&(0,a.jsx)("div",{className:"block-header__discount",children:(0,a.jsxs)("div",{className:"block-container",children:[(0,a.jsxs)("span",{children:["Use the code ",(0,a.jsx)("span",{className:"block-header__discount-code",children:u[n]})," to get ",u[n].split("-").pop(),"% discount."]}),(0,a.jsxs)("span",{children:["Only valid until ",new Date((new Date).valueOf()+2592e5).toISOString().slice(0,10)]})]})}),(0,a.jsx)("div",{className:"block-container",children:(0,a.jsxs)("div",{className:"block-header__inner",children:[(0,a.jsx)(d(),{href:"/",passHref:!0,children:(0,a.jsx)(t,{})}),(0,a.jsxs)("div",{className:"block-header__menu",children:[(0,a.jsx)("div",{className:"block-header__nav",children:(0,a.jsx)(d(),{href:"/guide",children:(0,a.jsx)("a",{className:"block-header__link ".concat("/guide"===e.pathname?"block-header__link--active":""),children:"Guide"})})}),(0,a.jsx)("div",{className:"block-header__nav",children:(0,a.jsx)(d(),{href:"/guide/validators",children:(0,a.jsx)("a",{className:"block-header__link ".concat(e.pathname.startsWith("/guide/validators")?"block-header__link--active":""),children:"Validators"})})}),(0,a.jsx)("div",{className:"block-header__nav",children:(0,a.jsx)(d(),{href:"/guide/plugins",children:(0,a.jsx)("a",{className:"block-header__link ".concat(e.pathname.startsWith("/guide/plugins")?"block-header__link--active":""),children:"Plugins"})})}),(0,a.jsx)("div",{className:"block-header__nav",children:(0,a.jsx)(d(),{href:"/guide/examples",children:(0,a.jsx)("a",{className:"block-header__link ".concat(e.pathname.startsWith("/guide/examples")?"block-header__link--active":""),children:"Examples"})})}),(0,a.jsx)("div",{className:"block-header__nav",children:(0,a.jsx)(d(),{href:"/updates",children:(0,a.jsx)("a",{className:"block-header__link ".concat(e.pathname.startsWith("/updates")?"block-header__link--active":""),children:"Updates"})})}),(0,a.jsx)(d(),{href:"/purchase",children:(0,a.jsx)("a",{className:"block-header__cta",children:"Purchase"})})]})]})})]})},p=function(e){var n=e.children,t=e.title;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(i(),{children:[(0,a.jsxs)("title",{children:[t," - FormValidation"]}),(0,a.jsx)("meta",{name:"description",content:t}),(0,a.jsx)("meta",{name:"twitter:title",content:"".concat(t," - FormValidation")}),(0,a.jsx)("meta",{name:"twitter:description",content:t}),(0,a.jsx)("meta",{property:"og:title",content:"".concat(t," - FormValidation")}),(0,a.jsx)("meta",{property:"og:description",content:t})]}),(0,a.jsx)(m,{}),n,(0,a.jsx)(l,{})]})}},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,s=e.secondaryTitle,o=void 0===s?"":s;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}),o&&(0,a.jsx)("div",{className:"block-hero__heading--secondary",children:o})]})}),(0,a.jsxs)("div",{className:"block-container",children:[n,(0,a.jsx)(r.Spacer,{size:"large"})]})]})}},24948: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(87835),s={},o=function(e){var n=e.children;return(0,r.kt)(i.Z,{title:"Using Ajax to submit the form"},n)};function l(e){var n=e.components,t=(0,a.Z)(e,["components"]);return(0,r.kt)(o,Object.assign({},s,t,{components:n,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"After clicking the Submit button, all fields will be validated automatically if the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/plugins/submit-button"}),"SubmitButton plugin")," is enabled. Usually you have two choices in the case all fields pass their validations:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Submit the form to the server. It can be done via the ",(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/plugins/default-submit"}),"DefaultSubmit plugin")),(0,r.kt)("li",{parentName:"ul"},"Send the form data to server via an Ajax request.")),(0,r.kt)("p",null,"For the second scenario, you can handle the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"/guide/events/core.form.valid"}),"core.form.valid event")," as following"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-js"}),"FormValidation\n    .formValidation(\n        document.getElementById('demoForm'),\n        {\n            fields: {\n                ...\n            },\n            plugins: {\n                ...\n            },\n        }

1\n    )\n    .on('core.form.valid', function() {\n        // Send the form data to back-end\n        // You need to grab the form data and create an Ajax request to send them\n\n        FormValidation.utils.fetch('/path/to/your/back-end/', {\n            method: 'POST',\n            params: {\n                fieldName: fieldValue,\n                otherFieldName: otherFieldValue,\n                ...\n            },\n        }).then(function(response) {\n            // Depending on the response from server, you can display a notification\n            // to let user know if the form is sent successfully\n            ...\n        });\n    });\n")),(0,r.kt)("p",null,"The sample code above uses a built in method ",(0,r.kt)("inlineCode",{parentName:"p"},"FormValidation.utils.fetch(url, options)")," to send data to given ",(0,r.kt)("inlineCode",{parentName:"p"},"url"),". It's up to you to choose your favourite library for doing the same thing, such as ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"http://web.archive.org/web/20250107181843/https://github.com/axios/axios"}),"axios"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"<script src=\"https://unpkg.com/axios/dist/axios.min.js\"><\/script>\n...\n<script>\n    document.addEventListener('DOMContentLoaded', function(e) {\n        FormValidation\n            .formValidation(\n                document.getElementById('demoForm'),\n                {\n                    ...\n                }\n            )\n            .on('core.form.valid', function() {\n                axios({\n                    method: 'post',\n                    url: '/path/to/your/back-end/',\n                    data: {\n                        fieldName: fieldValue,\n                        otherFieldName: otherFieldValue,\n                        ...\n                    },\n                }).then(function(response) {\n                    ...\n                });\n            });\n    });\n<\/script>\n")),(0,r.kt)("h3",null,"Uploading file"),(0,r.kt)("p",null,"You can use the ",(0,r.kt)("a",Object.assign({parentName:"p"},{href:"http://web.archive.org/web/20250107181843/https://github.com/axios/axios"}),"axios")," library to send file to your back-end as well."),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),"<form id=\"demoForm\" method=\"POST\">\n    <input type=\"file\" name=\"avatar\" />\n    ...\n</form>\n\n<script src=\"https://unpkg.com/axios/dist/axios.min.js\"><\/script>\n...\n<script>\n    document.addEventListener('DOMContentLoaded', function(e) {\n        FormValidation\n            .formValidation(\n                document.getElementById('demoForm'),\n                {\n                    ...\n                }\n            )\n            .on('core.form.valid', function() {\n                var formData = new FormData();\n\n                // Append the text fields\n                formData.append('firstName', demoForm.querySelector('[name=\"firstName\"]').value);\n                formData.append('lastName', demoForm.querySelector('[name=\"lastName\"]').value);\n                formData.append('username', demoForm.querySelector('[name=\"username\"]').value);\n                formData.append('email', demoForm.querySelector('[name=\"email\"]').value);\n\n                // Append the file\n                var avatarFiles = demoForm.querySelector('[name=\"avatar\"]').files;\n                if (avatarFiles.length > 0) {\n                    formData.append('avatar', avatarFiles[0]);\n                }\n\n                axios.post('/path/to/your/back-end/', formData, {\n                    headers: {\n                        'Content-Type': 'multipart/form-data'\n                    }\n                }).then(function(response) {\n                    ...\n                });\n            });\n    });\n<\/script>\n")),(0,r.kt)("p",null,"The back-end then can get the uploaded file. The following sample code in PHP demonstrates how we can do that:"),(0,r.kt)("pre",null,(0,r.kt)("code",Object.assign({parentName:"pre"},{className:"language-js"}),'<?php\n$targetFile = __DIR__ . \'/uploads/\' . basename($_FILES["avatar"]["name"]);\n$success = move_uploaded_file($_FILES["avatar"]["tmp_name"], $targetFile);\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/disable-the-submit-button-after-validating-a-form"}),"Disable the submit button after validating a form")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/multiple-steps-wizard"}),"Multiple steps wizard")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",Object.assign({parentName:"li"},{href:"/guide/examples/validating-form-manually"}),"Validating form manually"))))}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,[9774,2888,179],(function(){return n=89703,e(e.s=n);var n}));var n=e.O();_N_E=n}]);