Form validation using regular expresions

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi! 👋

  Nice work on this challenge! Your solution is responsive and looks great! 👍

  I have a few suggestions for this solution.

  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • I recommend making the icon-error.svg as a background-image of the input element.
  • In order for the alert messages to be accessible (or read) by screenreaders, it requires some work to be done.
    • Have a p element that is already exists on the DOM for each alert message. Leave them empty.
      • Add aria-live attribute
      • Add an id
    • Add aria-describedby to each input element. The value of it should point to the id of each error message.
    • On JavaScript
      • Grab the form element. Make it listens to the submit event. (not the click event of the submit button)
      • If the inputs are not valid then prevent the form from submitting.
      • Add the text content through JavaScript for each error message.
  • input with type="submit" was used before the button element exist. It's best to avoid using legacy elements. So, I recommend using button element instead.
  • Code your font size in rem, not pixels. This means the text size will be responsive if people want to adjust the size.

  Hope this helps. Happy coding! 😁

  Marked as helpful

  2
• 

  CodingTube•510

  @CodinGitHubPosted over 2 years ago

  Hi Vanza thank you very much for your feedback. I really appreciate it. This will help me improve my developer's skill a lot.

  0