Base Apparel coming soon Responsive page

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  You need to fix the html in this

  • header goes above main, not within it
  • section cannot only hold a background image. Use div, or I guess you could make it a pseudo element
  • you don't need to use a section to wrap the rest of the content when it is the only content. It's already in main. Again, div should be used there.
  • the alt text on chevron image should not include the word "button". It's already within a button. Just the word submit would be better
  • add a required attribute on the input and a pattern attribute (with email regex) if you want to use html default validation

  What is it exactly you're struggling with in the validation? It's good practice to have a go at your own custom validation if you can. All this would need to do is

  • get the form and add event listener on submit that runs a function What that function does:
  • get the input value
  • make an email regex variable
  • If input value matches regex, return true
  • If not, toggle class on form like "has-error"
  • over in css, if has-error class is present, style the input differently, display block on error message etc

  If you do include custom validation, you will need to

  • add aria-desciribedby on the input pointing to the id of the error message element
  • give error message element an aria live attribute
  • fill the error message in js, or change the display from none to block when has-error is present

  I hope that helps

  Marked as helpful

  2

  ---

  

  Rohit•330

  @Rohitgour03Posted almost 3 years ago

  @grace-snow Thanks, Grace. 😊 It helps me a lot, I will improve on all the points mentioned by you.

  Yeah, there are some bad practices in my HTML because I am a newbie so don't have much idea about how to use semantic elements? If you have some resources to learn about that please share. and I also was trying to use fewer divs. I also have to work on these aria things, I know very little about them.

  Once again thank you so much for giving your valuable time to help me. 🙏🚀

  0
• 

  A1ex•500

  @a1excpunkPosted almost 3 years ago

  Do your own validation with JS using regex, you need very little code for that. Tip: 1. google email validation regex string. 2. use match function/method for regex. 3. use DOM for displaying errors.

  Marked as helpful

  1

  ---

  

  Rohit•330

  @Rohitgour03Posted almost 3 years ago

  @a1excpunk Thanks, Alex 😊. I have heard about Regex but never used it yet, i will work on that.

  1
• 

  Christian Holm•500

  @MadmandenPosted almost 3 years ago

  @Rohitgour03 Hi Rohit, that's a nice try! It seems your image part is a bit narrower than the challenge design. And your title text is a bit smaller. But overall it's looking good :)

  Marked as helpful

  1