Design comparison
Solution retrospective
first of all, I'm glad that I was able to complete this challenge on my own. I learned a lot of new things from styling and fixing layout issues to smart use of CSS selectors to avoid JavaScript. Also, I learned a lot of new things about form validation including the various approaches to it.
What challenges did you encounter, and how did you overcome them?I mainly struggled with CSS. I didn't know how to style the radio and select elements. as it is really a task to alter their default behavior that too when every other browser is having their own standard stylings applied by default.
What specific areas of your project would you like help with?I have a question about validation logic I'd like some feedback on. how should I validate the html forms (for frontend only) correctly. I have few ideas in my mind, but I can't get myself to find the best approach.
- like the simplest I can do is put a required flag on every input element though I'm not sure how well it validates the forms, especially for email inputs.
- other one is manually using JavaScript to handle each case independently. Although, it works well but becomes cumbersome at times.
- Or should I take help from third party libraries for validation logic.
Community feedback
- @KapteynUniversePosted 16 days ago
There are frontend only ways. For example i did this one without JS
With required attribute on the inputs and styling it is possible. Email validation is weak tho but you don't need a third party for it. If you need a better validation you need to use JS. This is a basic validation for example. If the email is written in a correct format it will return true
function validateEmail(email) { const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; return re.test(String(email).toLowerCase()); }0@KapteynUniversePosted 16 days agoHey 2 addition;
There is also pattern attribute, you can write the regex in there too:
<input type="email" id="email" name="email" pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$"> <input type="submit">So don't need to JS, but
Today i was watching a youtube video and in the comment section someone said a backend validation is always required because someone can always change the html from their browser and send the form.
0
Please log in to post a comment
Log in with GitHub
Join 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