Design comparison
Solution retrospective
This was quite the challenge, specifically handling validation and styling at the same time. Any feedback would be appreciated.
Community feedback
- @darryncodesPosted almost 3 years ago
Hi Elroy,
Great to see another solution from you, nice one!
I found this one a lot trickier than it looked. Florin's JavaScript Client-side Form Validation - YT video is an invaluable resource for this one.
Happy coding!
Marked as helpful1@elroytoscanoPosted almost 3 years ago@darryncodes Hey Darryn, yes it should've been a "Junior" level challenge. I did check out that video, it did cover the basics of validation, I wanted a more in depth explanation of the validation.
After researching a little more, found this resource which goes about client side form validation in a more structured way.
1@darryncodesPosted almost 3 years agooh awesome @elroytoscano, I'll check that out and keep hold of the link.
Marked as helpful1@elroytoscanoPosted almost 3 years ago@darryncodes This one is really well explained. Thanks mate!
1 - @RibosomPosted almost 3 years ago
I really like your solution, especially the animations (great idea). From a design perspective, I like it pretty much, even if it is not exactly like the template.
Regarding the validation, I would do it differently (but you have to decide yourself, if my solution can help you) Maybe some ideas work for you as well (The ideas are copied from my solution, which I didn't submit^^) I really think you could simplify your html/js with a little different approach. And then not only one error message, would be shown on submit:
Use real submit input (advantage, click listener would also be activated on submit with keyboard)
<input class = "..." type = "submit" value = "Claim your free trial">
I added a event listener, which adds a "submitted" class to the form (helps to react on form submit in css)
document.querySelectorAll("input[type='submit']").forEach(input => { input.addEventListener("click", () => { input.form.classList.add("submitted"); }); });
Similar I added classes, when the inputs are changed or when validation is invalid. You can even put different invalid classes depending on the validation error by using
input.validity
in JS (I used the <input type="email" ...> default validation, here your solution might be better):document.querySelectorAll("input").forEach(input => { input.addEventListener("input", () => { refreshInputInvalidClasses(input); }); input.addEventListener("invalid", () => { refreshInputInvalidClasses(input); }); }); function refreshInputInvalidClasses(input) { if (input.validity.valueMissing) { input.parentElement.classList.add("invalid--required"); } else { input.parentElement.classList.remove("invalid--required"); } if (input.validity.typeMismatch) { input.parentElement.classList.add("invalid--type-mismatch"); } else { input.parentElement.classList.remove("invalid--type-mismatch"); } }
And then I added the error messages as custom html attributes, which can also be read in css/scss. For example for the email:
<div class = "input-container" data-error-required = "Email Address cannot be empty" data-error-type-mismatch = "Looks like this is not an email"> <input class = "input-field" name = "email" type = "email" aria-label = "Email Address" placeholder = "Email Address" required> </div>
When using pseudo elements, you even don't need the validation messages as separate divs/spans, but can read them with
attr
in css/scss:form.submitted .input-container.invalid--required::after { content: attr(data-error-required); } form.submitted .input-container.invalid--type-mismatch::after { content: attr(data-error-type-mismatch); }
The error icon can be set as background-image, which may be simpler:
form.submitted .input-container .input-field:invalid { ... background-image: url("images/icon-error.svg"); background-repeat: no-repeat; background-position-x: calc(100% - 24px); background-position-y: calc(50%); }
Marked as helpful0@elroytoscanoPosted almost 3 years ago@Ribosom This is a unique approach for solving the validation problem.
The
input type="submit"
and "error messages as custom html attributes" are a unique approach and will look into them.I knew about the pseudo elements approach, I opted for div/span approach for checking it's feasibility. Thanks for the info.
1
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