Responsive Landing Page with Manual Email Validation Form using JS
Design comparison
Solution retrospective
I'm wondering if it is possible to add email validation messages and icons using CSS only?
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, great work on this one. Desktop layout looks great, it is responsive but when you transition to mobile at point 983px, the website-logo seems overlapping the hero-image but seeing on mobile view, it looks great.
Hmm, I don't really know to be honest, but you can use
:invalid
selector forinput
element and addingrequired
to theinput
. Though this would always fire when user gives focus oninput
even without typing anything.Some suggestions would be:
- Don't add
width: 100vw
as this adds an extra horizontal scroll since this doesn't account the scrollbar's size. - The
header
itself should be usingposition: absolute
and not the website-logo. - Website-logo
img
should be using the website's name as thealt
likealt="base apparel"
. Remember that a website's logo is meaningful so always make sure it uses the properalt
value. - Also when using
alt
attribute, avoid using words that relates to "graphic" such as "logo" and others. Animg
is already an image/graphic so no need to describe it as one. - Do not directly type the wordings as uppercase on the markup, if you do this, screen-reader will read the text letter-by-letter and not by the wordings. Use only the lowercase version to write in the markup and instead use
text-transform: uppercase
on it. - The form error only works right now visually and not being associated to the
input
properly. A pseudocode of a proper error-implementation looks like this:
if ( input is wrong ) input.setAttribute("aria-invalid", "true"); input.setAttribute("aria-describedBy", id of the error-message); else input.removeAttribute("aria-invalid"); input.removeAttribute("aria-describedBy");
The error-message element should have an
id
attribute which is referenced by thearia-describedBy
attribute on theinput
element. By doing that, your user will know that theinput
is wrong because ofaria-invalid
and they will know what kind of error they made because of thearia-describedBy
.- Also, it would be great to have an
aria-live
element that will announce if the form submission is a success or not. Just an addition if you want to add more accessibility feature. If you confused on these suggestion of mine, you can have a look at this simple snippet of mine about accessible form. If you have any queries just let me know^^ - error-icon is just decorative image. Decorative image must be hidden at all times for screen-reader users by using
alt=""
and extraaria-hidden="true"
attribute on theimg
tag. button
should havetype="submit"
. Always be explicit on what yourbutton
should act when it is inside aform
element.- When wrapping a text-content do not just use
div
to wrap it, use meaningful element like ap
tag if it just a regular text or heading tag if it is an heading.
Aside from those, great job again on this one.
0 - Don't add
Please log in to post a comment
Log in with GitHubJoin 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