Interactive card Form

Community feedback

• 

  Sounak Mukherjee•560

  @kanuosPosted over 1 year ago

  Hi @Kuzitaa, I previewed the site and found some issues - mostly JS issues.

  1. The form can be submitted with all/some unfilled form fields.
  2. The validation is not working e.g. - the card holder name should not have digits etc
  3. Since you're using client side validation - the form submission's default behavior should always be prevented - unconditionally
  4. A form is submitted only if the button has a type="submit" and not type="button". In your HTML form, update the button type.
  5. You used button.addEventListener('click', completeFormView) on line 18 as the form doesn't submit on click meaning the form validation is never run. It's a hack and not a good one too. You cannot bypass validation
  6. There is not one heading element - try to include a h1 element per page - even if you have to hide it using CSS
  7. Try to use any CSS naming convention e.g BEM and structure your tags and classes accordingly.
  8. Using span to denote the thank you logo is not preferred. It should be an img element.
  9. You are using absolute units in your style - e.g width: 280px;. Using relative units helps in avoiding unnecessary media queries.
  10. Also, if you can - write modular js files and unit test them. It will help you a lot

  Apart from these, I think your solution is pretty decent. Fix the issues and re-upload if you can.

  Let me know what you think of the feedback - happy coding :)

  1

  ---

  

  Kuzitaa•130

  @KuzitaaPosted over 1 year ago

  @kanuos Thanks for the tips. I had problems with the completion screen, when the page was reloaded when the form was submitted, so I only put the type="button". That seems to mess up a lot.

  I will reupload it properly. Thanks for taking the time.

  1

  

  Kuzitaa•130

  @KuzitaaPosted over 1 year ago

  @kanuos Thanks for the tips. I had problems with the completion screen, when the page was reloaded when the form was submitted, so I only put the type="button". That seems to mess up a lot.

  I will reupload it properly. Thanks for taking the time.

  0