Skip to content
Submitted over 2 years ago

Sign up Form with Vanilla JavaScript

Neonita•80
@neonita
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi! I was wondering if anyone could give me a hand on how to change the email's placeholder value when a validation error is returned (like in the challenge's requirements). I tried to replace the placeholder value on my JavaScript file, in the email's conditional, like so:

document.getElementsByName('email').placeholder='email@example/com';

// I also tried...

document.getElementsByName('email')[0].placeholder='email@example/com';

I would greatly appreciate it, thanks!

Community feedback

  • Waleed Mumtaz•670
    @waleedmumtazPosted over 2 years ago

    Hey there! I just went through your code. Firstly, in your checkInputs() function, it looks like you are checking for lastName instead of checking the email being empty. Changing lastName to email:

    // Email
if (
  email.value === '' ||
  email.value === null ||
  email.length === 0
) {
  displayError(email, 'Email address cannot be empty', errorEmail)
} else if (!validateEmail(email.value)) {
  email.placeholder = 'email@example/com'
  displayError(email, 'Looks like this is not an email', errorEmail)
} else {
  console.log('Email: ✅ Valid!')
}

    Secondly, "example@email/com" does not seem like placeholder text to me. I think it shows that the input by the user is invalid (the "/" being the invalid character here, instead of "."). That is the actual text entered by a user, and it gets a text color of red if it is invalid.

    Hope this helps! 😀

    Marked as helpful
    1
    Neonita•80
    @neonitaPosted over 2 years ago

    @waleedmumtaz Oh wow, I didn't notice 😅 And thanks for clarifying the image email placeholder part of the challenge! Thanks, Waleed!

    1
    Waleed Mumtaz•670
    @waleedmumtazPosted over 2 years ago

    @neonita You're welcome, Neonita!

    1

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