使输入字段在包含值时设置样式

Question

如何让我的输入表单中的必填字段在页面加载且它们为空时具有红色边框，以及当它们内部有数据时如何将它们设置回正常样式？

我有这个代码：

页面：

<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()">
   <div>
      <label for="firstName">First Name:</label><br>
      <input type="text" name="firstName" id="firstName" placeholder="First name &hellip;">
   </div>
   <div>
      <label for="lastName">Last Name:</label><br>
      <input type="text" name="lastName" id="lastName" placeholder="Last name &hellip;">
   </div>
</form>

Javascript：

// Border colour for input web forms
function borderColour() {

    var firstName = document.getElementById('firstName').value;
    var lastName = document.getElementById('lastName').value;
    var firstNameId = document.getElementById('firstName');
    var lastNameId = document.getElementById('lastName');

    if (firstName == '') {
        firstNameId.addClass("form-required");
    } else {
        firstNameId.removeClass("form-required");
    }
    if (lastName == '') {
        lastNameId.addClass("form-required");
    } else {
        lastNameId.removeClass("form-required");
    }
}

CSS：

.form-required {border: 2px solid red !important;}

Answer 1

我无法添加评论，所以我看到您的 css 选择器缺少一个点来定义一个类。如果这不是问题，请告诉我。

编辑：

好的，问题是您使用AddClass() 作为函数，但它是jQuery 函数。您需要改用.classList.add("form-required") 方法。 与removeClass 方法相同。相反，您应该使用.classList.remove("form-required")

别忘了在函数定义之后调用你的函数。 像这样：

borderColour();

最终建议

但是你需要一个event listener 而不是调用你的函数once on page load。 因此，您需要将此功能添加到输入上的按键事件中。

示例代码

HTML

<form id="theForm" method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()">

<div>
    <label for="firstName">First Name:</label><br>
    <input type="text" name="firstName" id="firstName" placeholder="First name &hellip;">
</div>

<div>
    <label for="lastName">Last Name:</label><br>
    <input type="text" name="lastName" id="lastName" placeholder="Last name &hellip;">
</div>

</form>

CSS

.form-required {border: 2px solid red !important;}

Javascript（纯香草）

// Border colour for input web forms
function borderColour() {

// You could use below comment to select all inputs but you will probably need to select a textarea too. So selection is a next step. 
//var inputs = document.querySelectorAll('input');
var firstNameSelector = document.getElementById('firstName');
var value = firstNameSelector.value;
  console.log(firstNameSelector.value);
  if(value == '') {
       firstNameSelector.classList.add("form-required");
     }
  else {
   firstNameSelector.classList.remove("form-required");
       }

}
//Adding an event listener to the form element. If you click outside the form you will get the class toggle if the input is empty it will get the red border an so on...
document.getElementById("theForm").addEventListener("focusout", borderColour);

您可以将事件侦听器添加到所有输入元素，但要做到这一点，您将需要一个循环（可能是 foreach），就像其他答案一样。

Answer 2

我建议使用 CSS 而不是 JavaScript：

input,
input:placeholder-shown {
  /* default <input> styles */
  border: 1px solid red;
}
input:not(:placeholder-shown) {
  /* has a value entered */
  border-color: gray;
}

参考资料：

• :not()。
• :placeholder-shown。

Answer 3

首先，你应该考虑移动监听脚本的事件

您可以在此处使用querySelectorAll() 获取所有输入的节点列表，而不是单独选择每个输入

const inputs = document.querySelectorAll("input");

inputs.forEach(function (input, index) {
  input.addEventListener("input", () => toggleClass(index));
});

然后您应该创建一个函数来使用classList.add() 和classList.remove() 而不是addClass() 切换类

const toggleClass = (index) => {
  if (inputs[index].value === "") {
    inputs[index].classList.add("form-required");
  } else {
    inputs[index].classList.remove("form-required");
  }
};

Answer 4

这是一个有效的 sn-p

// Border colour for input web forms
function borderColour(e) {
  if(e.target.value == '') {
     e.target.setAttribute("class", "form-required");
  } else {
     e.target.removeAttribute("class");
  }
}

var inputs = document.querySelectorAll('input');

inputs.forEach(function(el){
  el.onpropertychange = borderColour;
  el.oninput = borderColour;
});

.form-required {border: 2px solid red !important;}

<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()">

<div>
    <label for="firstName">First Name:</label><br>
    <input type="text" name="firstName" id="firstName" placeholder="First name &hellip;">
</div>

<div>
    <label for="lastName">Last Name:</label><br>
    <input type="text" name="lastName" id="lastName" placeholder="Last name &hellip;">
</div>

</form>