Intro Component Signup Form

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Jackson!

  First, there is an icon-error.svg file which is an exclamation icon. There is no need to create your own icon.

  I recommend making the exclamation icon the background image of each input. So, when the input is in an invalid state, add the background image.

  CSS :invalid pseudo-class selector can be useful if you rely on the native HTML validation. But, in this case, you need JavaScript to populate the error message. So, at first, the p element for the error message should be empty. Then, when the users submit the form, shows the related error message for the invalid input by populating it with the error message.

  You can see my solution and read the article that I wrote to learn how to create accessible form validation.

  Intro Component with Signup Form | HTML CSS Sass JS coding challenge solution

  How To Create Accessible Form with Boring Design? - CodeNewbie Community

  I hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  Jackson Whiting•360

  @jacksonwhitingPosted almost 2 years ago

  @vanzasetia

  Thank you Vanza. This was super helpful. Your article was very well written and had a lot of useful links. I appreciate you sharing it.

  Do you have your own blog?

  Jackson

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @jacksonwhiting

  I am happy to hear that it was helpful. Also, thank you for your kind words. 😊

  I write my blog on Code Newbie. You can see my profile to see all my blog posts.

  Vanza Setia - CodeNewbie Community

  0

  

  Jackson Whiting•360

  @jacksonwhitingPosted almost 2 years ago

  @vanzasetia Very nice. Also, a question for you - why did you use a label instead of a placeholder for the placholder text?

  Thanks so much!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @jacksonwhiting

  I did that because input element must have an accessible name or label. placeholder does not give the input an accessible name.

  Also, there is no "actual" label on the design. So, I decided to make the label as the label and placeholder of the input at the same time.

  0