使输入字段在包含值时具有样式

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而不是JavaScript:

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

参考文献：

• :not()
• CCD_ 2

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

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

您可以在这里使用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

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

编辑：

好的，问题是你使用AddClass()作为函数，但它是jQuery函数。您需要使用.classList.add("form-required")方法。与CCD_ 10方法相同。相反，您应该使用.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(。