├── .gitignore
├── LICENSE
├── README.md
├── jest.config.js
├── jest.setup.js
├── package-lock.json
├── package.json
├── prettier.config.js
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo.svg
    └── robots.txt
├── snowpack.config.json
└── src
    ├── App.svelte
    ├── App.test.js
    ├── index.js
    └── schema.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .build
2 | build
3 | web_modules
4 | node_modules


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | """
 2 | MIT License
 3 | 
 4 | Copyright (c) 2020 Fred K. Schott
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | """
24 | 
25 | This license applies to parts of the repository originating from the
26 | https://github.com/facebook/create-react-app repository:
27 | 
28 | """
29 | MIT License
30 | 
31 | Copyright (c) 2013-present, Facebook, Inc.
32 | 
33 | Permission is hereby granted, free of charge, to any person obtaining a copy
34 | of this software and associated documentation files (the "Software"), to deal
35 | in the Software without restriction, including without limitation the rights
36 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
37 | copies of the Software, and to permit persons to whom the Software is
38 | furnished to do so, subject to the following conditions:
39 | 
40 | The above copyright notice and this permission notice shall be included in all
41 | copies or substantial portions of the Software.
42 | 
43 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
44 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
45 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
46 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
47 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
48 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
49 | SOFTWARE.
50 | """
51 | 
52 | This license applies to parts of packages/plugin-react-refresh/plugin.js originating 
53 | from the https://github.com/vitejs/vite-plugin-react repository:
54 | 
55 | """
56 | MIT License
57 | 
58 | Copyright (c) 2020-present, Yuxi (Evan) You
59 | 
60 | Permission is hereby granted, free of charge, to any person obtaining a copy
61 | of this software and associated documentation files (the "Software"), to deal
62 | in the Software without restriction, including without limitation the rights
63 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
64 | copies of the Software, and to permit persons to whom the Software is
65 | furnished to do so, subject to the following conditions:
66 | 
67 | The above copyright notice and this permission notice shall be included in all
68 | copies or substantial portions of the Software.
69 | 
70 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
71 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
72 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
73 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
74 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
75 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
76 | SOFTWARE.
77 | """


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-yup-form-validation
 2 | 
 3 | This is example code for my blog post - [Svelte form validation with Yup](https://codechips.me/svelte-form-validation-with-yup/).
 4 | 
 5 | ## How to run
 6 | 
 7 | Clone and run `npm i && npm start`
 8 | 
 9 | ## There is more!
10 | 
11 | For more interesting stuff like this follow me on [Twitter](https://twitter.com/codechips) or check out my blog https://codechips.me
12 | 
13 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   ...require("@snowpack/app-scripts-svelte/jest.config.js")(),
3 | };
4 | 


--------------------------------------------------------------------------------
/jest.setup.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import "@testing-library/jest-dom/extend-expect";
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "start": "snowpack dev",
 4 |     "build": "snowpack build",
 5 |     "test": "jest"
 6 |   },
 7 |   "dependencies": {
 8 |     "svelte": "^3.23.1"
 9 |   },
10 |   "devDependencies": {
11 |     "@snowpack/app-scripts-svelte": "^1.1.4",
12 |     "@testing-library/jest-dom": "^5.9.0",
13 |     "@testing-library/svelte": "^3.0.0",
14 |     "jest": "^26.0.1",
15 |     "prettier": "^2.0.5",
16 |     "prettier-plugin-svelte": "^1.1.0",
17 |     "snowpack": "^2.4.0",
18 |     "yup": "^0.29.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   tabWidth: 2,
 3 |   semi: true,
 4 |   singleQuote: true,
 5 |   printWidth: 80,
 6 |   plugins: ['prettier-plugin-svelte'],
 7 |   svelteSortOrder: 'styles-scripts-markup',
 8 |   svelteStrictMode: false,
 9 |   svelteBracketNewLine: true
10 | };
11 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codechips/svelte-yup-form-validation/89869af27bb74806d37ce664b4c9cb4bc569042b/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="description" content="Web site created using create-snowpack-app" />
 8 |     <title>Snowpack App</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>You need to enable JavaScript to run this app.</noscript>
12 |     <script type="module" src="/_dist_/index.js"></script>
13 |     <!--
14 |       This HTML file is a template.
15 |       If you open it directly in the browser, you will see an empty page.
16 | 
17 |       You can add webfonts, meta tags, or analytics to this file.
18 |       The build step will place the bundled scripts into the <body> tag.
19 | 
20 |       To begin the development, run `npm start` or `yarn start`.
21 |       To create a production bundle, use `npm run build` or `yarn build`.
22 |     -->
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.1 118">
2 |   <path fill="#ff3e00" d="M91.8 15.6C80.9-.1 59.2-4.7 43.6 5.2L16.1 22.8A31.25 31.25 0 001.9 43.9c-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5"/>
3 |   <path fill="#fff" d="M40.9 103.9a21.8 21.8 0 01-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3l.6-2.6.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1a6.62 6.62 0 008.8 2L65.5 72c1.4-.9 2.3-2.2 2.6-3.8.3-1.6-.1-3.3-1-4.6a6.56 6.56 0 00-8.8-1.9l-10.5 6.7a18.6 18.6 0 01-5.6 2.4 21.8 21.8 0 01-23.4-8.7 20.2 20.2 0 01-3.4-15.3c.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1a6.56 6.56 0 00-8.8-1.9L32.4 46.1c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6a6.56 6.56 0 008.8 1.9l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/snowpack.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@snowpack/app-scripts-svelte",
3 |   "scripts": {},
4 |   "plugins": []
5 | }
6 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   form * + * {
 3 |     margin-top: 1em;
 4 |   }
 5 | </style>
 6 | 
 7 | <script>
 8 |   import { regSchema } from './schema';
 9 | 
10 |   let values = {};
11 |   let errors = {};
12 | 
13 |   const extractErrors = err => {
14 |     return err.inner.reduce((acc, err) => {
15 |       return { ...acc, [err.path]: err.message };
16 |     }, {});
17 |   };
18 | 
19 |   const submitHandler = async () => {
20 |     try {
21 |       await regSchema.validate(values, { abortEarly: false });
22 |       alert(JSON.stringify(values, null, 2));
23 |       errors = {};
24 |     } catch (err) {
25 |       errors = extractErrors(err);
26 |     }
27 |   };
28 | </script>
29 | 
30 | <div>
31 |   <h1>Please register</h1>
32 |   <form on:submit|preventDefault={submitHandler}>
33 |     <div>
34 |       <input
35 |         type="text"
36 |         name="name"
37 |         bind:value={values.name}
38 |         placeholder="Your name"
39 |       />
40 |       {#if errors.name}{errors.name}{/if}
41 |     </div>
42 |     <div>
43 |       <input
44 |         type="text"
45 |         name="email"
46 |         bind:value={values.email}
47 |         placeholder="Your email"
48 |       />
49 |       {#if errors.email}{errors.email}{/if}
50 |     </div>
51 |     <div>
52 |       <input
53 |         type="text"
54 |         name="username"
55 |         bind:value={values.username}
56 |         placeholder="Choose username"
57 |       />
58 |       {#if errors.username}{errors.username}{/if}
59 |     </div>
60 |     <div>
61 |       <input
62 |         type="password"
63 |         name="password"
64 |         bind:value={values.password}
65 |         placeholder="Password"
66 |       />
67 |       {#if errors.password}{errors.password}{/if}
68 |     </div>
69 |     <div>
70 |       <input
71 |         type="password"
72 |         name="passwordConfirm"
73 |         bind:value={values.passwordConfirm}
74 |         placeholder="Confirm password"
75 |       />
76 |       {#if errors.passwordConfirm}{errors.passwordConfirm}{/if}
77 |     </div>
78 |     <div>
79 |       <button type="submit">Register</button>
80 |     </div>
81 |   </form>
82 | </div>
83 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render } from "@testing-library/svelte";
2 | import App from "./App";
3 | 
4 | test("renders learn svelte link", () => {
5 |   const { getByText } = render(App);
6 |   const linkElement = getByText(/learn svelte/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import App from "./App.svelte";
 2 | 
 3 | var app = new App({
 4 |   target: document.body,
 5 | });
 6 | 
 7 | export default app;
 8 | 
 9 | // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
10 | // Learn more: https://www.snowpack.dev/#hot-module-replacement
11 | if (import.meta.hot) {
12 |   import.meta.hot.accept();
13 |   import.meta.hot.dispose(() => {
14 |     app.$destroy();
15 |   });
16 | }
17 | 


--------------------------------------------------------------------------------
/src/schema.js:
--------------------------------------------------------------------------------
 1 | import * as yup from 'yup';
 2 | 
 3 | // simulate a network or database call
 4 | const checkUsername = username =>
 5 |   new Promise(resolve => {
 6 |     const takenUsernames = ['jane', 'john', 'elon', 'foo'];
 7 |     const available = !takenUsernames.includes(username);
 8 |     // if we return `true` then validation has passed
 9 |     setTimeout(() => resolve(available), 500);
10 |   });
11 | 
12 | const regSchema = yup.object().shape({
13 |   name: yup.string().required('Please enter your name'),
14 |   email: yup
15 |     .string()
16 |     .required('Please provide your email')
17 |     .email("Email doesn't look right"),
18 |   username: yup
19 |     .string()
20 |     .required('Username is a manadatory field')
21 |     .test('usernameTaken', 'Please choose another username', checkUsername),
22 |   password: yup.string().required('Password is required'),
23 |   passwordConfirm: yup
24 |     .string()
25 |     .required('Please confirm your password')
26 |     .oneOf([yup.ref('password'), null], 'Passwords do not match')
27 | });
28 | 
29 | export { regSchema };
30 | 


--------------------------------------------------------------------------------