Design comparison
SolutionDesign
Solution retrospective
I find difficulties while setting error icon in input field and displaying error messages when input field is empty
- how can I make optimize validation the code.
Community feedback
- @kimodev1990Posted 11 months ago
- You could use :-
let inputs = document.querySelectorAll("input"); let form = document.querySelector("form"); let errorIcon = document.querySelectorAll(".er_ricon"); let errorLabel = document.querySelectorAll(".nameErr"); form.addEventListener("submit", (event) => { event.preventDefault(); inputs.forEach((items, index) => { if ( items.value === "" || (validateEmail(items.value) === true && index == 2) ) { showError(index); } else { hideError(index); } }); });
- Then :-
function showError(inputIndex) { errorIcon[inputIndex].classList.add("error-icon-show"); errorLabel[inputIndex].classList.add("label-info-show"); } function hideError(inputIndex) { errorIcon[inputIndex].classList.remove("error-icon-show"); errorLabel[inputIndex].classList.remove("label-info-show"); }
- Your validation of Email :-
function validateEmail(inputText) { const mailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; if (inputText.match(mailFormat)) { return false; } else { return true; } }
Hope you find this Helpful.
Other than that, Nice work & Keep going on.
Marked as helpful1 - @Manju299Posted 11 months ago
Thank you so much for the feedback.
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