vanilla js for form validation

Solution retrospective
Next time I would like to write a cleaner CSS and JavaScript. If there were more form fields, I would have created functions for adding and removing messagges to make the code a bit cleaner and manageable.
What challenges did you encounter, and how did you overcome them?At the beginning I had used the invalid event, but after some test I found out that the browser email validation was a bit too lax so I couldn't use the invalid event anymore because it gets fired after the browser did the validation, so I went back to the good old submit event :')
What specific areas of your project would you like help with?I'd like feedback on the use of the background properties for double image and for the js
Please log in to post a comment
Log in with GitHubCommunity feedback
- @thisisharsh7
Congrats on completing the challenge! Your background layering using
background-blend-mode
and custom email validation is well-executed!Some suggestions:
-
When error/success messages appear, the layout height shifts slightly. To prevent that:
- Reserve space below the form using a fixed
min-height
on the.message
element. - Or always render the element with
visibility: hidden
to avoid reflow.
- Reserve space below the form using a fixed
-
For cleaner JS: Instead of repeating
messageDiv.textContent = ...
andclassList.add/remove
in many places, you can make a small function that shows the message. Then just call that function — it keeps code clean and short
Overall a good work - happy coding!
Marked as helpful -
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord