Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro component with sign-up form

Angelo Barbarulo• 280

@Jorahhh

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'ld like to have some feedback, especially on the JavaScript code. If there is a simple and cleaner way to make it, 'cause mine is a mess.

Community feedback

Cats-n-coffee• 670

@Cats-n-coffee

Posted

Hi Angelo!

Nice job! Form validation is never an easy thing, especially when there's an email address in the form (you'll see a lot of people use libraries and validation is usually done in the frontend and backend as well). These are the things that caught my attention:

  • Your submit button is inside a div but the event listener is on the input which is much smaller than your div. At first I thought the button wasn't working because I didn't think of clicking on the text itself. I would suggest removing the div and use only your input (or you could use a <button type="submit"></button>.
  • Your validation is good for basic things such as empty fields, email and password length. You could add a length check for names, and white space trimming for all the fields (except password maybe, I'm not well versed in password validation). Another thing to look into if you're interested is input sanitation, which should be done on both front and backend (most modern frameworks will do this for you).
  • Another fun thing to implement is validation on blur which you'll see used often especially in long forms.

Js feedback:

  • it seems that you can place most of your selectors at the very top of the file with the ones you already have there (like your errors divs) and they can all be const since you are not re-assigning the values.
  • You should be able to remove the selectors like this one document.forms['myForm']['firstName'].value;, you already have each form input at the top so you can do firstName.value.
  • I think you could place your event listener on the form itself and listen for the submit event, it'll help with code readability.
  • To keep your Js shorter (and slightly improve performance - not that this matters here), you can place a class on each part that changes with validation (error div and input) and add/remove the class in Js. You might be able to integrate the error icon into the class logic as well, so you don't need to loop through them at the beginning and change the background. Your Js isn't as bad as you think :)

Let me know if you have any questions, hope this helps!

Marked as helpful

1

Angelo Barbarulo• 280

@Jorahhh

Posted

@Cats-n-coffee

Thank you man, your feedback was super helpful.

I've done some changes in the script, something also as you told me. I tried to make it less redundant using functions.

I'm going forward to improve it more.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord