JavaScript Form Validation Tutorial

Form validation is the process of ensuring that the data a user submits through a form is in the correct format and within the constraints set by the application. If the user enters data that is incorrect or missing, the form validation logic can prevent the form submission and prompt the user to correct the information. Form validation done via JavaScript on a web page is called 'client-side' form validation.
📚Materials/References:
GitHub Code: github.com/pkellz/js-form-val...
🌎 Find Me Here:
Twitter: / realdevsage
Discord: / discord
Ebooks: payhip.com/devsage
Merch: cottonbureau.com/people/devsage
⏰ Timestamps
0:24 - Demo
1:22 - Styling/CSS
14:26 - Adding Validation

[@DevSage]

⏰Timestamps
0:24 - Demo
1:22 - Styling/CSS
14:26 - Adding Validation
🤖 Github: github.com/pkellz/js-form-validation-project
💙 Twitter: twitter.com/realDevSage
📙 Ebooks: payhip.com/devsage
💥 Discord: discord.gg/BP8wPv6raA
👕 Merch: cottonbureau.com/people/devsage

[@MuhammadFaizanKarim]

Just started watching your videos already loving it. Keep it up

[@renthelen4065]

This popped into my recommended feed just as I was dying on my own form validation! Thank you, I hope I can figure out where to put these on mine, since I'm using React Express TT^TT

[@masonunger7170]

This is an awesome tutorial thank you so much 15:10 how did you clip board like that ? i need that function in my life

[@masonunger7170]

never mind i figured it out settings-system-clipboard-clipboard history

[@DevSage]

Appreciate it. And yeah the clipboard thing is Windows Key + V

[@garystorey1639]

Hey! Nice video!
I just wanted to mention that you could get the values from the inputs directly from the submit event. The `event.target.elements` contains the form fields. To get the value for the username, you could use `event.target.elements.username.value`.
You also might like zod or yup for form schema validation. Both are great libraries.
Keep up the great work!

[@DevSage]

This is good information. I think I knew there was some way to get the values from the event like that, but I never took time to learn how. Thanks for that

[@henryrussell7392]

May I suggest a schema validation library? Eg joi (I think my last comment got deleted)

[@DevSage]

Hm never heard of joi. I'll check it out. And I'm not sure why your last comment got deleted. Sorry about that.

[@henryrussell7392]

@@DevSage I think it might have been youtube spam filter since I put a link to the docs before.
joi is really need you can stuff like this:
function responseValidate(response) {
const schema = {
id: Joi.objectId().required(),
response: Joi.string().min(3).max(512).required()
};
return schema.validate(response);
}
I think Yup is more commonly used on the frontend, with the same principles, there is also formik

[@DevSage]

@@henryrussell7392 Wow I must be waay out of the loop because I've never heard of any of these haha. I primarily use MongoDB for all my personal projects so I usually just end up using Mongoose for schema validation, which can then also be used as the data layer.

[@dmoney_thegreat]

How did you get the emoji in there?

[@DevSage]

On Windows if you press Windows Key + : it'll open an emoji menu

[@dmoney_thegreat]

@@DevSage I'm on linux. I just installed emojisense. That looks like its working

[@dmoney_thegreat]

@@DevSage btw ,just picked up the ebook!

[@DevSage]

@@dmoney_thegreat Awesome. Appreciate that!