JavaScript Forms Explained: Submit Event, preventDefault & Validation | JavaScript Tutorial #13
Description: Forms are everywhere: sign up, contact, checkout. Learn how to handle them the right way with JavaScript, without the page reloading on you 🚀
In this video, you'll learn:
✅ What a form does by default (and why your page reloads)
✅ Listening for submit on the form, not click on the button
✅ What the event parameter is
✅ Stopping the reload with event.preventDefault()
✅ Checking what users typed with .value.length
✅ Showing friendly error and success messages
✅ Clearing the form with reset()
✅ An honest note: why the server must always check the data too
🎯 Your challenge:
Before checking the message, check the name. If it's shorter than 2 characters, show "Please enter your full name." in crimson and return. Type just "A" as the name and see your message!
▶️ Next episode: fetch: get real data from the internet. Your page is about to talk to the world!
⏱️ Chapters:
0:00 Intro
0:14 The contact form
0:21 Submitting with no JavaScript
0:38 The default behavior of a form
0:44 A place for messages
0:54 Listen for submit
1:20 event.preventDefault()
1:27 Testing: no more reload
1:39 Checking what users typed
1:55 The error message
2:11 Success message and reset
2:23 Testing the validation
2:37 An honest note about real forms
2:51 Recap
3:17 Your challenge and what's next
🔔 Subscribe and follow BentHub for more coding tutorials, made simple.
Understand programming. Code with confidence.
#JavaScript #LearnJavaScript #LearnToCode #WebDevelopment #JavaScriptTutorial #CodingForBeginners #BentHub Close description
In this video, you'll learn:
✅ What a form does by default (and why your page reloads)
✅ Listening for submit on the form, not click on the button
✅ What the event parameter is
✅ Stopping the reload with event.preventDefault()
✅ Checking what users typed with .value.length
✅ Showing friendly error and success messages
✅ Clearing the form with reset()
✅ An honest note: why the server must always check the data too
🎯 Your challenge:
Before checking the message, check the name. If it's shorter than 2 characters, show "Please enter your full name." in crimson and return. Type just "A" as the name and see your message!
▶️ Next episode: fetch: get real data from the internet. Your page is about to talk to the world!
⏱️ Chapters:
0:00 Intro
0:14 The contact form
0:21 Submitting with no JavaScript
0:38 The default behavior of a form
0:44 A place for messages
0:54 Listen for submit
1:20 event.preventDefault()
1:27 Testing: no more reload
1:39 Checking what users typed
1:55 The error message
2:11 Success message and reset
2:23 Testing the validation
2:37 An honest note about real forms
2:51 Recap
3:17 Your challenge and what's next
🔔 Subscribe and follow BentHub for more coding tutorials, made simple.
Understand programming. Code with confidence.
#JavaScript #LearnJavaScript #LearnToCode #WebDevelopment #JavaScriptTutorial #CodingForBeginners #BentHub Close description
