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

Form validation with Javascript and styled with Sass

#sass/scss
Ana 70

@akajfes

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 tried to use Sass for this and will try to use NPM instead of VSCode extensions build and watch the code. I added a thank you message after the validation too. I'm wondering if there's a way to condense my Javascript code.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Ana! 👋

Here are some suggestions for improvements.

  • Wrap the text with a meaningful element: For example, use a paragraph element to wrap the text including the error message. There should not be text in <span> and <div> alone.
  • Progressive enhancement: Add the novalidate attribute to the <form> through JavaScript. Then, add required attribute to all <input> elements. This way, if the JavaScript fails to load or the users disable JavaScript, the native form validation will be running.
  • Do not use legacy or deprecated elements: Use <button type="submit"> instead of <input type="submit">. Submit input is legacy.
  • One declaration for @import: You only need to write @import once on the stylesheet. As a side note, using <link> tags are recommended for better performance.
  • Do not use pixel unit for font sizes: Use rem or em instead of px for font sizes. Never use px unit. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS
  • Keep the .gitignore: This can prevent your repository from getting filled with .DS_Store files.

I hope this helps. Happy coding! 👍

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