Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Form validation component

@Ayodelearog

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I couldn't implement the error message on submit. And I couldn't prevent my form from submitting empty fields. I'd appreciate tips on how to make these work. And I'd appreciate comments on my work, and where I can improve. Thank you.

Community feedback

@KaustubhMaladkar

Posted

Hi Ayodelearog,

  • To provide error messages, include a paragraph in your HTML whose display property is set to none. Upon submission, you can choose to display to these paragraphs.
  • To prevent the submission of empty field, add the required attribute, e.g. <input type="text" required>. You should also perform a check in JavaScript, like this
    form.addEventListener("submit", e => {
       if (input.value == "") {
           e.preventDefault();
           input..classList.add("error") //your error class should include the error styles in CSS
       }
   }
1

Please log in to post a comment

Log in with GitHub
Discord logo

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