display flex

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Great work on this solution!

  In order to get error messages to show up all at the same time, you could try adding these error messages to the HTML markup, and then getting them to appear and disappear by toggling a .hidden utility class on them.

  By default, this class should be added to all the error messages as there should be no errors upon loading the page.

  .hidden {
    display: none;
  }
  

  You could check each input for validity whenever the user clicks the submit button or presses 'enter' on their keyboard while focused on an input field.

  If a field is missing the required input or the input is invalid, you could use JS to remove the .hidden class of the corresponding error message in order to get the error message to appear.

  errorMessage.classList.remove('hidden');
  

  If the user input then becomes valid, you could add this class back to remove the error message from view.

  errorMessage.classList.remove('hidden');
  

  Other than that, good job once again on this challenge!

  Hope this has been helpful! :)

  0

  ---

  

  LuccaMauroMolina•130

  @LuccaMauroMolinaPosted 9 months ago

  @VenusY Hello, how are you, ahh well, thank you very much, should I add that in the if or what would it be like?

  0

  

  Venus•1,640

  @VenusYPosted 9 months ago

  @LuccaMauroMolina This would all be within the callback function of the event listener for the "submit" event.

  So, in your case, this should be added to your Cuenta() function.

  Instead of checking every input field at the same time like you've done here:

  if (name === "" && last === "" && gmail === "" && pass === "")
  

  You could run some checks on each of the input fields individually every time the user presses the submit button to see if the user input meets the requirements:

  if (name === "") {
    ...
  }
  
  if (last === "") {
    ...
  }
  
  if (gmail === "") {
    ...
  }
  
  if (pass === "") {
    ...
  }
  

  If the user input does not meet the criteria, then you could remove the .hidden utility class from it on the corresponding error message and error icon.

  0

  

  LuccaMauroMolina•130

  @LuccaMauroMolinaPosted 9 months ago

  @VenusY Good evening how are you? There I did what you told me, and it jumps out one by one, I don't know if it's the html or the js, I'll send you there

  HTML:

  <div class="bor self-center h-screen pt-4 pb-20 "> <button class="py-6 w-screen flex place-items-center justify-center rounded-xl mb-5 shadow-xl font-extrabold text-white lg:block m-auto lg:w-full "> Try it free 7 days <span class="font-normal"> then $20/mo. thereafter</span> </button> <form action="" id="form"> <div class="panel flex flex-col ml-5 w-screen rounded-lg px-10 py-10 lg:w-full"> <input class="name border-solid mb-6 h-11 rounded-md pl-6" type="text" placeholder="First Name"> <label for="name" class="hidden"></label> <input class="last border-solid mb-6 h-11 rounded-md pl-6" type="text" placeholder="Last Name"> <label for="last" class="hidden"></label> <input class="email border-solid mb-6 h-11 rounded-md pl-6" type="email" placeholder="Email Address"> <label for="email" class="hidden"></label> <input class="pass border-solid mb-6 h-11 rounded-md pl-6" type="password" placeholder="Password"> <label for="pass" class="hidden"></label> <button type="submit" class="submit w-full flex place-items-center justify-center text-white rounded-lg py-4 px-10 lg:block m-auto lg:w-full font-medium mb-3" id="btn">CLAIM YOUR FREE TRIAL</button> <p class="terms text-center cursor-pointer">By clicking the button, you are agreeing to our <span class="red-terms font-semibold">Terms and Services </span> </p> </div> </form> </div>

  JS: form.addEventListener("submit", (event) => { event.preventDefault();

  if (Cuenta()) { form.submit(); } });

  function Cuenta() { let name = document.querySelector(".name").value; let last = document.querySelector(".last").value; let gmail = document.querySelector(".email").value; let pass = document.querySelector(".pass").value;

  let error = document.querySelector("label"); let errorMessage = document.querySelector(".hidden");

  error.innerHTML = ""; errorMessage.classList.add('hidden'); error.style.borderColor = "initial";

  if (name === "") { error.innerHTML = "<p>completar el nombre</p>"; errorMessage.classList.remove('hidden'); error.style.borderColor = "red"; return false; } if (last === "") { error.innerHTML = "<p>completar el segundo nombre</p>"; errorMessage.classList.remove('hidden'); error.style.borderColor = "red"; return false; } if (gmail === "") { error.innerHTML = "<p>completar el Gmail</p>"; errorMessage.classList.remove('hidden'); error.style.borderColor = "red"; return false; } if (pass === "") { error.innerHTML = "<p>completar la contraseña</p>"; errorMessage.classList.remove('hidden'); error.style.borderColor = "red"; return false; } if (pass.length < 8 || pass.length > 16) { error.innerHTML = "<p>ingrese contraseña de 8 a 16 caracteres</p>"; errorMessage.classList.remove('hidden'); error.style.borderColor = "red"; return false; }

  return true; }

  0