Skip to content
Submitted about 1 month ago

contact-form-main

Ramkrishn Rai•620
@Ram0O7
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Contact form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.
Any feedback is appreciated, thanks!

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted about 1 month 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
    KapteynUniverse•2,170
    @KapteynUniversePosted about 1 month ago

    Hey 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