Skip to content
Submitted over 3 years ago

Pod Request

Jared Brown•90
@JaredBrown1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pod request access landing page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I could not figure out how to get the custom red validation text under the input field, so I was hoping someone could give me some hints. I was only able to figure out how to customize the text of the popup validation already in place from the 'required' property on my input.

Community feedback

  • Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    Hi Jared! The best option I think would be to just have custom validation done with JS and control the visibility of the error message in JS. If you want to stick to CSS, you could try adding the error message right underneath the input in your markup, set display: none, and use input:invalid + p (or something like that) to select it and change the display rule. The :invalid pseudoclass kicks in as soon as the user starts typing and goes away when the input is valid.

    Nice work on this challenge btw, but do have a look at how your solution works on tablet size (you can emulate different viewport sizes in your browser). On some sizes, the image is really stretched out and it covers up the logo.

    0

Please log in to post a comment

Log in with GitHub

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