Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
notarobot
Full Stack JavaScript Techdegree Student 4,728 PointsDemo Video Doesn't Match The Directions
This practice is confusing because in the demo video, form elements are being validated while they're being typed in, showing the validation icon, requiring a 'blur' event on each input separately. However, the directions are requiring a 'submit' event.
When using the submit event it's default is to clear out the form and refresh, so there's no way to see if it's valid with the green checkbox as shown in the video.
To see the validation symbols, add e.preventDefault() as the first line in the addEventListener(). This will prevent it from submitting the form if correct but it will show you the validation icons.
To add to the confusion, in the second video solution the e.preventDefault() is only added to the else portion of the if clause, only stopping if there's an error. This only shows the valid icon if one of the other inputs are invalid.
1 Answer
Rohald van Merode
Treehouse StaffHi notarobot 👋
Your post is not being linked to a course or workshop, so I can't tell for sure which video you're talking about. But I think you are referring to the Form Validation practice session?
For Practice Sessions there are always multiple different solutions to get a similar behavior as shown in the first video. You could totally use a keyup or blur event instead to improve the UX, or prevent the default behavior of all form submissions. In the solution video I'm just sharing what I came up with, but there are plenty of other approaches that would result into similar behavior 😄
The demo video is recorded with the same code as shown in the solution video. During recording I submitted the form multiple times to have the hints and icons update on screen, if you want to have similar behavior as what's happening on screen for all your users you can indeed use a blur event. I'll take note of your feedback for future practice sessions and make sure to explain what is happening on screen better.
As for the e.preventDefault(), I personally like to have the default behavior when a form is successfully submitted. This is why I opted for only calling it if one or more of the validations failed. You can definitely call it at all times and handle the data differently if you prefer 🙂
Hope this clears things up! 😄
p.s. since you are a Techdegree Student I'd highly recommend using the dedicated Slack Channels, here you can find dedicated staff to answer any questions/issues/bugs you may come across 🙂
notarobot
Full Stack JavaScript Techdegree Student 4,728 Pointsnotarobot
Full Stack JavaScript Techdegree Student 4,728 PointsI really appreciate the personalized response here. I think i was just getting confused and maybe saw some minor inconsistencies that perhaps weren't there. I just completed Project 3, interactive form and a lot of the questions I had are now resolved as i've put these ideas into practice.
Thanks again for the response!