Design comparison
Solution retrospective
Do you know why my icons were disappearing when I set them to position: absolute? Is it because I'd already set the error messages to absolute in the same div? How can I resolve this? Should I be using preventDefault() even when the form input values are valid? When I tried moving it to only be used when the values were invalid, it continued working while the inputs were valid. Do you have any criticisms of my code or suggestions on how to improve it? Thanks for everyone's help! I've learned a lot from the feedback I've received here and I hope it shows!
Community feedback
- @Gaurav4604Posted almost 2 years ago
Hi! I am a newbie frontend dev myself, Your project looks amazing, from a UI POV. 🥳 I'd suggest cleaning up the JS side of things a bit
form.addEventListener('submit', validateEmail) form.addEventListener('submit', validateFirstName) form.addEventListener('submit', validateLastName) form.addEventListener('submit', validatePassword)
you can use the same eventListener to be used for calling all of these functions, this would promote less code repetition, also, same can be done for the error showcase UI logic
firstName.classList.remove('error') firstNameErrorMessage.remove('display-block') firstName.value = ""
Instead of the above code, being used for each function, you can abstract out the logic, into its own function such as
function showErrorInFormField(formFieldDOMRef, formFieldErrorDOMRef){ formFieldDOMRef.classList.remove('error'); formFieldErrorDOMRef.remove('display-block') formFieldDOMRef.value = "" }
This way, your JS file will be smaller in size, Another thing, I would suggest is, adding comments to your codebase, so that you can read your code later and understand exactly what the workflow and logic was trying to achieve 😄
Marked as helpful0@nevercanonPosted almost 2 years ago@Gaurav4604 Thanks for your help, it's very useful! I was wondering if you could explain to me how I would create the error showcase logic into a function. I understand how the function you provided works, but how would I get the formFieldDOMRef and formFieldErrorDOMRef parameters into that function? Like how would the function know that I want the firstName and firstNameErrorMessage to be used as the parameters, for example? Would I make formFieldDOMRef and formFieldErrorDOMRef into variables and then set their value to the value of the other variables? I hope that makes sense. Thanks for all your help, I'm very new to JavaScript.
0@Gaurav4604Posted almost 2 years ago@nevercanon Sure!
I will edit your validateFirstName() function
function validateFirstName(e) { if(firstName.value === '' || firstName.value === null) { firstName.classList.add('error') firstNameErrorMessage.classList.add('display-block') } else { showErrorInFormField(firstName, firstNameErrorMessage); } }
This way you can reuse the function, if you want, we can go ahead and make the code, even more reusable, I will let you figure this one out. (Just a hint, look at all places in your code, that look logically similar, and think about how you can abstract out the logic from it 😉)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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