在提交后更改无效输入的边框颜色

Question

如果字段为空，我想在提交表单后将边框颜色更改为红色。

const contactForm = document.querySelector(".contact-form");
const firstName = document.querySelector("#first-name");
const lastName = document.querySelector("#last-name");

contactForm.addEventListener("submit", submitForm);

function submitForm(e) {
e.preventDefault();

const firstNameValue = firstName.value;
const lastNameValue = lastName.value;
const messageValue = message.value;

if (firstNameValue === "") {
firstName.style.border = "2px solid red";
return false;
}

if (lastNameValue === "") {
lastName.style.border = "2px solid red";
}

if (messageValue === "") {
message.style.border = "2px solid red";
}
}

<form action="" class="contact-form">
<div class="form-check">
<input type="text" id="first-name" name="first-name" placeholder="First Name" required>
</div>
<div class="form-check">
<input type="text" id="last-name" name="last-name" placeholder="Last Name" required>
</div>
<button class="submit-button" type="submit">Submit</button>
</form>

我还试图在javascript中添加输入元素的类，当它们无效时。但这并没有奏效。我知道有很多方法可以做到这一点，但我检查过了，我不能让它们在我的表单上工作。(

我不知道我错过了什么，你能帮帮我吗?谢谢你！

Answer 1

如果你打算使用required属性，你可以在CSS中使用input:invalid选择器

input:invalid
{
border: 2px solid pink;
}

这将自动设置元素的样式，而无需提交表单。

然而，在许多情况下，需要更全面的表单验证，在这种情况下，应该避免required属性，并且可以通过应用css类来手动设置无效字段的样式:

const contactForm = document.querySelector(".contact-form");
const firstName = document.querySelector("#first-name");
const lastName = document.querySelector("#last-name");
contactForm.addEventListener("submit", submitForm);
contactForm.addEventListener("input", validateInput);
function validateInput(e) {
let isInvalid = false;
const value = e.target.value.trim();
switch (e.target.name) {
case "first-name":
isInvalid = value === "" || value == "test";
break;
case "last-name":
isInvalid = value === "";
break;
case "message":
isInvalid = value === "";
break;
}
e.target.classList.toggle("invalid", isInvalid);
return isInvalid;
}
function submitForm(e) {
e.preventDefault();
const isInvalid = validateInput({target: firstName}) |
validateInput({target: lastName}) |
validateInput({target: message});
if (isInvalid) {
//not all fields are valid do something here
}
}

.invalid {
border: 2px solid red;
background-color: pink;
}

<form action="" class="contact-form">
<div class="form-check">
<input type="text" id="first-name" name="first-name" placeholder="First Name" value="test">
</div>
<div class="form-check">
<input type="text" id="last-name" name="last-name" placeholder="Last Name">
</div>
<div class="form-check">
<textarea id="message" name="message" placeholder="Message"></textarea>
</div>
<button>submit</button>
</form>

注:避免使用内联样式，尽可能使用css类。

Answer 2

你几乎就在那里了，但是你有几件事有点错。首先，你没有提交按钮。然后，即使您有一个，您也无法提交任何字段为空的表单，因为您将它们全部标记为required。此外，submitForm函数有一个不存在的消息，您正在检查。

删除后，一切似乎都很好。

const contactForm = document.querySelector(".contact-form");
const firstName = document.querySelector("#first-name");
const lastName = document.querySelector("#last-name");
contactForm.addEventListener("submit", submitForm);
function submitForm(e) {
e.preventDefault();
const firstNameValue = firstName.value;
const lastNameValue = lastName.value;
if (firstNameValue === "") {
firstName.style.border = "2px solid red";
}
if (lastNameValue === "") {
lastName.style.border = "2px solid red";
}
}

<form action="" class="contact-form">
<div class="form-check">
<input type="text" id="first-name" name="first-name" placeholder="First Name">
</div>
<div class="form-check">
<input type="text" id="last-name" name="last-name" placeholder="Last Name">
</div>
<input type="submit" />
</form>