Update form validation post

Author: Claudio Cortese

_posts/2024-10-20-some-useful-tips-and-tricks-about-form-validation-in-javascript.md

@@ -2,14 +2,15 @@
 layout: post
 title: "Some Useful Tips And Tricks About Form Validation in JavaScript"
 tags: tutorial webdev javascript
-image: /img/posts/yup.png
+image: /img/posts/zod.png
 typewriter-delay: 20
 ---
+
 As time goes by, sooner or later, every developer has been tasked with building a form. 🛠️
 
 Well, as far as I'm concerned, that's not one of the funniest things to do. 😅
 
-But it turns out that even the simpler of websites out there is going to need at least a basic contact form. 🤷‍♂️
+But it turns out that even the simplest of websites out there is going to need at least a basic contact form. 🤷‍♂️
 
 And, sometimes, there are cases where you are building a really complex and big application with forms everywhere. 🤓
 
@@ -19,7 +20,7 @@ But, in this post, I'm not going to show you a specific way of building a form n
 
 I'm going to try to be framework agnostic as well, but I might use a couple of lines of `React` here and there, as that's what I mostly use day by day.
 
-Anyway, I promise you that this will not retain you from using what I will show you in any other framework you might happen to use or even [Vanilla JS](http://vanilla-js.com/)!
+Anyway, I promise you that this will not prevent you from using what I will show you in any other framework you might happen to use or even [Vanilla JS](http://vanilla-js.com/)!
 
 Well, at this point you may be wondering what I'm precisely going to talk about, then? 🧐
 
@@ -29,46 +30,43 @@ Well, at this point you may be wondering what I'm precisely going to talk about,
 >
 > -- <cite>[Wikipedia][1]</cite>
 
-To my advice, one of the most important task we have while building a form is to ensure that the data is proactively validated.
+To my advice, one of the most important tasks we have while building a form is to ensure that the data is proactively validated.
 
 Of course, there MUST be validation on the backend as well, that's mandatory. ☝️
 
 Never validate data only on the front-end! This might be dangerous. ☢️
 
-But, actually, the real reason why you should do that, is to preserve the mental health of your user. Really! 😂
+But, actually, the real reason why you should do that is to preserve the mental health of your user. Really! 😂
 
-As a matter of fact, as a user, I often run into long and/or complex and evil form that gives no hint to me about what I should do next or if the data that I provided is correct. 😈
+As a matter of fact, as a user, I often run into long and/or complex and evil forms that give no hint to me about what I should do next or if the data that I provided is correct. 😈
 
-These are some question that I'm sure even you had while filling-out this kind of forms:
+These are some questions that I'm sure even you had while filling out this kind of forms:
 
-1) Is there life on mars? 👽
-2) Will the code I wrote yesterday compile? 🤔
-3) But most importantly... Why the hell is the f**** submit button disabled?!? 🤬
+1. Is there life on Mars? 👽
+2. Will the code I wrote yesterday compile? 🤔
+3. But most importantly... Why the hell is the f\*\*\*\* submit button disabled?!? 🤬
 
-Well, to be honest sometimes happens that the submit button is ALWAYS enabled (really?). 😶
+Well, to be honest, sometimes it happens that the submit button is ALWAYS enabled (really?). 😶
 
 As a developer, I strive to do my best to avoid these frustrating situations.
 
 If only we could make the user “fail fast, fail often”...
 
 What if I told you we can accomplish this task easily?
 
-## Yup to the rescue 🚑
+## Zod to the rescue 🚑
+
+> Zod is a TypeScript-first schema declaration and validation library for JavaScript and Node.js.
 
-> Yup is a JavaScript object schema validator and object parser.
-  -- <cite>[Yup GitHub Page](https://github.com/jquense/yup)</cite>
+-- <cite>[Zod GitHub Page](https://github.com/colinhacks/zod)</cite>
 
 ### Install
 
 ```shell
-yarn add yup
+yarn add zod
 ```
 
-If you are using `TypeScript` you should install `@types` as well.
-
-```shell
-yarn add -D @types/yup
-```
+If you are using `TypeScript`, you don't need to install any additional type definitions, as Zod is written in TypeScript and provides its own types.
 
 ### Play with it! 👨‍💻
 
@@ -87,21 +85,26 @@ Let's pretend we require the user to provide us these pieces of information:
 - Phone Number
 - A link to a portfolio
 
-All of the fields are required but `Sex` and `Phone Number`.
+All of the fields are required except `Sex` and `Phone Number`.
 
-We should end up writing this schema with `Yup`:
+We should end up writing this schema with `Zod`:
 
 ```js
-Yup.object({
-  name: Yup.string().required(),
-  surname: Yup.string().required(),
-  birthDate: Yup.date().required(),
-  sex: Yup.mixed().oneOf(['Male', 'Female']),
-  yearsOfProficiency: Yup.number().positive().required("Don't be shy!"),
-  email: Yup.string().email().required(),
-  phoneNumber: Yup.string(),
-  portfolio: Yup.string().url()
-})
+const { z } = require("zod");
+
+const contactSchema = z.object({
+  name: z.string(),
+  surname: z.string(),
+  birthDate: z.date(),
+  sex: z.enum(["Male", "Female"]).optional(),
+  yearsOfProficiency: z
+    .number()
+    .positive()
+    .refine((val) => val > 0, { message: "Don't be shy!" }),
+  email: z.string().email(),
+  phoneNumber: z.string().optional(),
+  portfolio: z.string().url(),
+});
 ```
 
 Straightforward, right?
@@ -110,83 +113,89 @@ But, what if we want to make a property required based on the value of another f
 
 Let's say that we would like to be able to contact the user in some way: we don't care if by email or by calling them.
 
-Thereafter, we have to make sure that at least the email OR the phone is provided.
+Therefore, we have to make sure that at least the email OR the phone is provided.
 
 Well, that's easily done with this schema:
 
 ```js
-Yup.object({
-  name: Yup.string().required(),
-  surname: Yup.string().required(),
-  birthDate: Yup.date().required(),
-  sex: Yup.mixed().oneOf(["Male", "Female"]),
-  yearsOfProficiency: Yup.number()
-    .positive()
-    .required("Don't be shy!"),
-  email: Yup.string()
-    .email(),
-  phoneNumber: Yup.string()
-    .test(
-      "at-least-email-or-phone-number",
-      "You should provide at least either an email or a phone number",
-      function(value) {
-        const email = this.parent.email;
-
-        if (!email || value ? .length === 0) {
-          return false;
-        }
-
-        return true;
-      }
-    ),
-  portfolio: Yup.string().url()
-})
-
+const contactSchema = z
+  .object({
+    name: z.string(),
+    surname: z.string(),
+    birthDate: z.date(),
+    sex: z.enum(["Male", "Female"]).optional(),
+    yearsOfProficiency: z
+      .number()
+      .positive()
+      .refine((val) => val > 0, { message: "Don't be shy!" }),
+    email: z.string().email().optional(),
+    phoneNumber: z.string().optional(),
+    portfolio: z.string().url(),
+  })
+  .refine((data) => data.email || data.phoneNumber, {
+    message: "You should provide at least either an email or a phone number",
+    path: ["email", "phoneNumber"], // Specify which fields are causing the issue
+  });
 ```
 
-Whit this schema in place, if we were to validate an object of this shape:
+With this schema in place, if we were to validate an object of this shape:
 
 ```js
-{
-  name: 'Jimmy',
-  surname: 'Hopkins',
-  sex: 'Male',
-  age: 28,
+const result = contactSchema.safeParse({
+  name: "Jimmy",
+  surname: "Hopkins",
+  sex: "Male",
   yearsOfProficiency: 2,
-  birthDate: '1991-04-29T22:00:00.000Z'
-}
+  birthDate: new Date("1991-04-29"),
+});
+
+console.log(result);
 ```
 
 We would get a nice Validation Error:
 
 ```
-ValidationError: You should provide at least either an email or a phone number
+{
+  success: false,
+  error: ZodError {
+    issues: [
+      {
+        code: 'custom',
+        message: 'You should provide at least either an email or a phone number',
+        path: [ 'email', 'phoneNumber' ]
+      }
+    ]
+  }
+}
 ```
 
 #### Password example 🔐
 
-Another example that came to my mind is the one where the user has to enter a password twice as a mean of security.
+Another example that comes to mind is the one where the user has to enter a password twice as a means of security.
 
 ```js
-Yup.object({
-  password: Yup.string().required('Password is required'),
-  confirmPassword: Yup.string()
-    .oneOf([Yup.ref('password'), null], "Passwords must match")
-    .required('Password confirm is required')
-})
+const passwordSchema = z
+  .object({
+    password: z.string().min(6, "Password must be at least 6 characters"),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords must match",
+    path: ["confirmPassword"],
+  });
 ```
 
 Doing that we make sure that the two passwords are exactly the same!
 
 ### Profit! 😎
 
-All of that being said, you should be now able to validate a complex shaped object with ease.
+All of that being said, you should now be able to validate a complex-shaped object with ease.
 
-If you are using React, you might want to try [Formik](https://jaredpalmer.com/formik/) or [React Hook Form](https://react-hook-form.com/).
-These two libraries are going to make your life so much easier while building forms, and leverage the possibility to use Yup as a schema validator!
+If you are using React, you might want to try [Formik](https://formik.org/) or [React Hook Form](https://react-hook-form.com/).
+These two libraries are going to make your life so much easier while building forms, and they support using Zod as a schema validator!
 
-That's all for this post, see you next one!
+That's all for this post, see you in the next one!
 
 Happy hacking until then! 👨‍💻
 
-[1]:https://en.wikipedia.org/wiki/Data_validation
+[1]: https://en.wikipedia.org/wiki/Data_validation