Intro component with form validation

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  This is pretty good!

  Just a few pointers on html

  • you're misusing the section element at the moment. Sections act just like divs when used like this. They are only meaningful if they are labelled (and this challenge doesn't need that extra emphasis anyway). Looking at this content, it is all related and would only be one section. As a general rule, done even consider using a section unless there is a chunk of content clearly defined and headed by a h2.
  • inputs need labelling. Essential
  • error images need to have empty alt attributes. Ideally they wouldn't be in the html at all, but background images instead
  • the error message elements should be blank by default and linked to each input. You do this via a unique id on each error message, and aria describedby on each input. The error messages also need an aria live attribute on them so they are announced by screenreaders when they become visible
  • never have text in divs or spans alone. Always use a meaningful element, like a paragraph

  0
• 

  Josh•110

  @JoshMoonerPosted over 2 years ago

  Hi, Mostafa! It's look prety well. Nice job, I can note that you add an input of password confirm and I think it's great if it's a page to login. I'm doing this challenge too but I don't know how to hide and show the error messages. I did the form validation with alerts and everything is OK, but in the moment of show and hide the warning messages I don't know how to do it. I thought on use position: absolute with z-index: -1 to hide and position: static with z-index: 0 to show. But when I submit the form to valid it, the page structure damage. My knowledge of JS is basic. How do you did it? Any help, please? Thanks!

  0

  ---

  

  Mostafa Sayed•350

  @zDevtutorPosted over 2 years ago

  @JoshMooner Hey Josh, First, thank you for your comment. I would like to encourage you to take a look at the code file to take an idea of how I did it. It's a matter of just placing the error icon in place as well as the error message and I managed the visibility of them to be hidden at first and used Javascript to make them visible. For the error icon, I think you will need to use position absolute since it is placed over the input fields. That's It. Let me know if that helps and thanks again.

  1

  

  Josh•110

  @JoshMoonerPosted over 2 years ago

  @zDevtutor Hi Mostafa! Thanks for responding! I took your advice and it worked to me. I added a couple of things too. I complete the challenge, you can see it here: https://www.frontendmentor.io/solutions/form-validation-with-js-HyQgDzsX5

  0