Design comparison
Solution retrospective
Hey All,
Here is my very next challenge which indeed was a challenge, however, for the first time, I am truly proud of the result. Not sure if it's perfect (more than probable that it is not at all), but eventually I nailed email validation, which was rather hard for me. This is the way I coped with it, I know there are many other ways to do so, but I would be curious to know if there is a better one. Any ideas?
Thank you for checking it out,
Cheers to you all,
Dalma
Community feedback
- @matiasluduena23Posted 12 months ago
Hi Darla! Congratulations you finished the challenge! It looks great!
- Your form validation works great for this project but if you want to go one step further you can split you code to make it more reusable. The possibilities are many. You can check for you form submit, this help if you had more than one form in your website.
- You pass your form as a parameter to the function.
- get the input in the form and check for empty and validEmail( depending of the different kind of error send different message too error function).
- create a 'Show error' function that takes 2 parameters the message and the form.
- The error function get the element that display the message(the p element in your case) and insert the message. And also add a
show-error
class to your form. This is a different way to add the errors to elements. inserting a class in its parent.
const formEl = document.querySelector('.form'); const validateFormEmail = (form) => { form.addEventListener('submit', (e)=> { e.preventDefault() const input = form.querySelector('input').value.trim(); if(input === "") { showError(`Can't be blank`, form) }else if(!validateEmail(input)){ showError(`Please check your email`, form) }else { showSuccess('Thanks for surscribe!!!', form) } }) } validateFormEmail(formEl) // we past the form to the function function showError(message , form) { const errorElement = form.querySelector('.error-message'); errorElement.innerText = message; form.classList.add('show-error'); }
In your css file you need to tell that when the error class be in the form all your error elements are going to be visible.
CSS
.form.show-error .error-message{ display = 'block'; } .form.show-error .error-icon{ display = 'block'; }
Here and example using typescript.
Hope this help you!
If you don't understand something let me know.
Good code!
Matias
Marked as helpful0@bdal90Posted 12 months agoHey Matias,
Thank you for your invaluable advice! I am very new to JS, I'm still struggling a lot, it takes a while to digest what you wrote, but will succeed for sure!
0
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