Javascript form validation

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there! 👋

  When I did this challenge, I made a separate function to validate the user input value. However, I only created one main function that handled the submit event.

  const validateUserInputs = event => {
    /** 
      * If the user inputs are not valid then:
      * - Prevent the form from submitting
      * - Show error messages
      *
      * P.S. This is just a brief overview
      */
  };
  
  form.addEventListener("submit", validateUserInputs)
  

  So, my recommendation is for every input, it has its own function to validate the value. In this case, there will be validatePassword(), validateEmail(), and validateName() for both name.

  For the SVG icon, you can use background-image on the input element when the input is in an invalid state.

  Yes, I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  There are some areas that need to be fixed.

  • Very important, don't make the value of the input disappear every time the users focus on the input element.
  • The label should contain a text that explains what the input is about (it should not be empty).
  • input with type="submit" is a browser legacy. I recommend using button with type="submit" instead.
  • b has been deprecated. Use strong tag instead.
  • "Try it free 7 days then $20/mo. thereafter", it should not be a button. It's just a paragraph element.
  • Remove the unnecessary white space on the HTML file. It increases the file size and possibly makes the HTML code harder to read.
  • I recommend using CSS classes instead of inline CSS through JavaScript. Just like having an inline styling on the HTML should be avoided, the same principle applies in JavaScript as well.

  I highly suggest writing your code with consistent style (e.g. the indentation, quotes, whitespace, etc). If you write your code with consistent style, it will make it easier to read for everyone (including your future self).

  I hope you find this information beneficial. Happy coding! 😄

  Marked as helpful

  1

  ---

  

  geoffjecrois•390

  @geoffreyhachPosted over 2 years ago

  @vanzasetia Thanks ! Those informations are highly beneficial indeed, i'll try to remember all of this things to write better code in the future. cheers !

  0
• 

  Otávio•230

  @Otavio-CiprianoPosted over 2 years ago

  Hey there, good job completing this challenge.

  Some advices

  • Try to give name to all input on the html

  • During the submit event you don't need to access the document again to select the input inside the form, you could select them using that "const myForm" and accessing the input by name

  example:

  let email = myForm['email']

  • You could also use all that validation code inside the same eventListener function, because is the same event to the same element, there's no reason to separate that.

  I hope this helps and it didn't sound rude or weird.

  Cheers!

  Happy coding 👍

  Marked as helpful

  1

  ---

  

  geoffjecrois•390

  @geoffreyhachPosted over 2 years ago

  @Otavio-Cipriano Thanks a lot for reviewing my code. You're answering a lot of the questions I asked myself during the challenge.

  Cheers !

  0