Sign up Form with Validation in JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is responsive and the mobile state looks great as well.

  Jonathan already gave a great feedback, just going to add some suggestions on this as well:

  • Avoid using height: 100vh on a large container especially the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh , this take full height and let the element expand.
  • Remove the width: 100vh on the body as this creates the horizontal scrollbar. This property does not account the horizontal space allotted for the scrollbar.
  • Too much id usage, for styling always use class and not id attribute.
  • Each input needs to have a label associated on it. On this one, the label would be a screen-reader only label meaning it will be invisible for sighted users and only be visible for assistive tech. It will have like a sr-only class.
  • Each error-message should not be a heading tag, just use p tag on it. Each error-message should have an id attribute. This id will be referenced by the input if it was wrong.
  • If the input is wrong, add an aria-invalid="true" on the input, this way users will know that their input is invalid, also add a aria-describedBy attribute on the input the value of this attribute will be the id of the error-message that is associated with it. If the input is wrong, set those like:

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", { id of the error-message} );
  else
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  By doing this, you are making your content more accessible for all users.

  • Use button type="submit" instead of input.
  • If you are confused on what I had said take a look at my sample snippet for accessible form . You can also see in there the usage of aria-live element. This way, if the form is invalid, an assistive tech will inform the user that the form is invalid.
  • Lastly, you don't need position: absolute on the footer:>

  If you have any queries just drop it here. Again, great work on this one.

  Marked as helpful

  0

  ---

  

  Matias•170

  @MatiasEmilianoPosted about 3 years ago

  @pikamart Thanks!

  0
• 

  Jonathan•295

  @Nathan-FrontPosted about 3 years ago

  Good job on this, design looks great, although some things to point out.

  1. The action="" of your form should not be empty, try adding # in it to stop the html error
  2. The error image is not displaying when error is being displayed.
  3. Email validation is not being checked even when I enter wrong email format.
  4. As a newbie in form validation just like me, there are better ways to do it so I recommend you check this out. It was super helpful for me: (https://www.youtube.com/watch?v=rsd4FNGTRBw&t=1449s) Good luck!

  Marked as helpful

  0

  ---

  

  Matias•170

  @MatiasEmilianoPosted about 3 years ago

  @Nathan-Front Thanks Jonathan!

  0