删除输入内容后，表格中的必填字段不会变为红色

问题描述

基本表单验证

在此问题中，您将确保文本框不为空。完成以下步骤：

创建一个文本输入框。 编写一个将文本框的边框更改为红色的函数。

（如果值等于“”，则为空）。

如果该值不为空，则边框应恢复正常。

当用户释放键（onkeyup）时，运行刚刚创建的功能。

请在我的编码错误的地方更正我的代码？

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>

解决方法

您正在尝试在加载js之后立即使用let form = document.getElementById("form_Text").value;获取输入值。因此，它将始终为空。您需要在事件监听器中调用它。

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

但是您可以使用input事件代替focus和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>

---

更新

您可以在下面找到其他绑定方式。您可以使用keyup事件监听器来代替使用两个单独的事件（focus和oninput）。

这是一个比较keyup和input事件的SO线程：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>

,

//I understood this part:
    const formText = document.getElementById("form_Text"); 
    const showText = document.getElementById("showText");
    
//But I didn't understand addEventListener part since I haven't learned about it,I think it will make sense to me once I learned about addEventListener part
    
    formText.addEventListener('input',function(evt) {
      const inputValue = evt.target.value;

// understood if and else aswell** 
     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";
      }
    })

//can we use unfocus and onkeyup event instead of input event to solve this:**

    let form_Text = document.getElementById("form_Text").value;
    let showText = document.getElementById("showText");
    
    document.getElementById("form_Text").onfocus = function () {
      if (form_Text = "") {
        form_Text.style.backgroundColor = "red";
        showText.innerHTML = "Form is empty";
      }
    };
    else {
      document.getElementById("form_Text").onkeyup = function () {
        form_Text.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>