@Gaurav4604
Posted
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 helpful
@nevercanon
Posted
@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.
@Gaurav4604
Posted
@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 helpful
