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

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 选择器缺少一个点来定义 class。如果这不是问题，请告诉我。

编辑：

好的，问题是您正在使用 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

这是一个工作片段

// 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>

Answer 3

我建议使用 CSS 而不是 JavaScript:

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

参考文献：

Answer 4

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

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

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

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

然后你应该创建一个函数来切换 class 使用 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");
  }
};

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

making input fields styled when they contain values

html

javascript

css

forms

styles

编辑：

最后的建议

示例代码