Intro component with sign up form

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Nicolás!

  I recommend learning to create accessible form validation. Accessible form validation means that the error messages get pronounced by screen readers, each input has a label, and using the correct type of input.

  How To Create Accessible Form with Boring Design?

  I have some feedback on improving this solution.

  • <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
  • Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.
  • Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.
  • Select the <form> element and add a "submit" event to it. Then, prevent it from submitting by doing event.preventDefault(). It is better than adding a "click" event to the submit button.
  • No need to make the placeholder empty when the input is in an invalid state.
  • The error styling should be removed when the users try to submit the input with the correct value.
  • Remove the trailBtn variable. It is not used in the script.

  I hope my feedback helps. Happy new year!

  Marked as helpful

  1