Required field in form doesn´t change to red after erasing input content

Question

Basic form validation

In this question, you’re going to make sure a text box isn’t empty. Complete the following steps:

Create a text input box. Write a function that turns the text box’s border red if the box is empty.

(It’s empty if the value equals "").

The border should go back to normal if the value is not empty.

When the user releases a key (onkeyup), run the function you just created.

please correct my code where I'm coding wrong?

let form = document.getElementById("form_Text").value;
document.getElementById("form_Text").onfocus = function() {
  if (form == "") {
    document.getElementById("form_Text").style.backgroundColor = "red";
    document.getElementById("showText").innerHTML = "Form is empty";
  } else {}
  document.getElementById("form_Text").onkeyup = function() {
    document.getElementById("form_Text").style.backgroundColor = "white";
    document.getElementById("showText").innerHTML =
      "Form is not Empty, No red Background";
  };
};

Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>

Harun Yilmaz · Accepted Answer · 2020-10-21T05:48:56.947

You are trying to get the input value with let form = document.getElementById("form_Text").value; right after the js is loaded. Therefore it will always be empty. You need to call it inside the event listener.

document.getElementById("form_Text").onfocus = function() {
    let form = document.getElementById("form_Text").value;
    ...
}

But instead of writing two separate event listeners, you can use input event instead of focus and keyup

   
const formText = document.getElementById("form_Text");
const showText = document.getElementById("showText");

formText.addEventListener('input', function(evt) {
  const inputValue = evt.target.value;

  if (inputValue == '') {
    formText.style.backgroundColor = "red";
    showText.innerHTML = "Form is empty";
  } else {
    formText.style.backgroundColor = "white";
    showText.innerHTML = "Form is not Empty, No red Background";
  }
})

Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>

UPDATE

You can find the other way of binding below. Instead of using two separate events (keyup and focus), you can use oninput event listener.

Here's a SO thread comparing keyup and input events: https://stackoverflow.com/a/38502715/1331040

const formText = document.getElementById("form_Text");
const showText = document.getElementById("showText");


formText.oninput = function(evt) {
  const inputValue = evt.target.value;

  if (inputValue == '') {
    formText.style.backgroundColor = "red";
    showText.innerHTML = "Form is empty";
  } else {
    formText.style.backgroundColor = "white";
    showText.innerHTML = "Form is not Empty, No red Background";
  }
}

Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>

Hi Harun your editing makes more sense and thank you for solving that..! since I haven't learned about addEventListener I didn't understand that part, can you please solve the challenge with "onfocus" and "onkeyup" — TechBantu, Oct 17 '20 at 20:52
Sorry for the late reply. I've been really busy recently. I updated the answer as you requested. Please have a look at it. — Harun Yilmaz, Oct 21 '20 at 05:49
Thank you so much Harun that helped a lot, I appreciate that..! — TechBantu, Oct 23 '20 at 08:20

Required field in form doesn´t change to red after erasing input content

1 Answers1