Form validation using tailwind and vanilla js

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 years ago

  Hi

  You need to remove the alert on this and I'm seeing some alignment/positioning issues on mobile when the errors are visible. I'll add a screenshot on slack so you can see what I mean.

  You would be better letting the error icon be a background image rather than have it in the html, or it could go in a pseudo element.

  I can see invalid html where it says try it free in that purple box. You shouldnt have an anchor tag wrapping a paragraph. I don't think that content would be a link anyway though. Where would it go? The sign up form is already directly below it.

  I don't think the Sr only h2 is necessary on this either. The content is pretty clear what it is. If anything, you could use aria-labelledby on the form element and link it to the "try it free text" if you really want to label the form.

  In the form itself there are some important principles to learn in this challenge, it's a great practice ground

  • well done for labelling all inputs!
  • they also need aria describedby pointing to the id of their associated error container (I assume the hidden class is setting the errors to display none? They need to be display none by default so they don't get read as a field description at the wrong time)
  • the error containers also need an aria-live attribute to make sure they are announced to screenreaders when they appear
  • I can't read the css it's too long. If you're going to use a utility class approach, that's your choice, but it is essential to have some build tooling to purge it so you're only loading what you need for that project. Don't make people download a massive render blocking css file for a small component
  • the js can be much simpler. All it needs to do is toggle one class on the wrapper around each input, or set CustomValidity on the input or even toggle a custom data attribute. Literally every other bit of styling can be done in css to make the error show up (using child or sibling selectors depending on approach )

  I hope this is all helpful, good luck

  10

  Marked as helpful
• 

  Priyanka•380

  @cssbubble

  Posted over 3 years ago

  Thanks, Grace, for your detailed reply.

  1- Can you share me the the resources to learn more about Aria labels? I would love to know and learn more about it.

  2- Yes, I am using Tailwind css CLI. I did it to learn how to use cli so that I can manage all the projects using one github repository and interlink css, images, js and other files.

  3. Thanks for pointing out 4th point. I was unaware of that. I will learn more about it and improve.

  4. Will improve js too.

  Very helpful.

  00