Submitted over 2 years ago

Intro Components, Using HTML, CSS-FlexBox, also JavaScript validation

KamRan•370

@comendrun

Preview site View code

This is a solution for...Intro component with sign-up form

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What I learned this challenge have challenged my JS knowledge and also i would learn about client-side authentication with JS

why we would consider this kind of validation? why we need to do this at all? well, this way it could be much faster to validate the data that entered by the user, and it would be much faster than sending data to server and process it that way. (that been said, we still need to validate our data also on server) with JS we can almost validate any form we want by simple functions and variables this way we will have only acceptable inputs from user (client) to be sent to our server so, according to MDN docs there are two types of client side form validation, first is the built in validation features in html that will allow us to basicly require data in required format from user. its much better performance wise and also much easier to keep track of it, but its much simpler and not so customizable the second type is by JS

--Useful resources [https://www.youtube.com/watch?v=CYlNJpltjMM] - a video from JavaScript Academy that helped me a lot with the js part of the challenge [https://codepen.io/javascriptacademy-stash/pen/oNeNMNR?editors=0010] - the codeOpen code example for the video above [https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation] - MDN doc for client side validation [https://www.frontendmentor.io/solutions/intro-component-with-signup-form-html-css-sass-js-By3rWK2Mq] - challnege done by dear Vanza. He is a perfect guy who i admire his passion for this profession. i really liked his challenge and it helped me a lot.

Community feedback

Vanza Setia•27,775
@vanzasetiaPosted over 2 years ago
Hello there, KamRan! 👋

First, I want to let you know that your compliments brighten up my whole day. Thank you so much. I really appreciate it. 😍

Before diving into the feedback, I suggest using Markdown to write or share the link on the Questions for the community text input. So, I recommend updating it to make it looks better. You can see all the possible Markdown syntax by clicking the keyboard icon (right above the text input).

Now, for the feedback.

For the alert, I suggest using em or strong HTML tag instead of i tag. If you read the MDN documentation for the i tag, it's not meant to be used for alert.

There are some things that you need to do to make the alert messages get pronounced by the screen readers.

Add aria-live attribute to the error message.

Add aria-describedby to the input element.

Make sure that the alert messages are not accessible by screen readers before the users submit the form. To do this, you can use hidden attribute or display: none of the elements.

If you are not familiar with those aria attributes, I suggest reading the documentation for each attribute.

I suggest removing type="text/javascript" from the script tag. Browsers nowadays know what is the type of is (just like the style tag). But, if you keep it there, it won't cause any problems.

I don't recommend setting the html or the :root font size. It can cause huge accessibility implications for those users with different font size or zoom requirements. I suggest changing the font size on the body element or on the parent element instead.

That's it! Hope you find this useful! 😉
Marked as helpful
2

Please log in to post a comment

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