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

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 中添加 class。 但它没有用。 我知道有很多方法可以做到这一点，但我检查了一下，但我无法让它们在我的表格上工作。 :(

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

Answer 1

你快到了，但你有几件事有点不对劲。 首先，您没有提交按钮。 然后，即使您有一个，您也无法提交任何字段为空的表单，因为您将它们全部标记为required 。 submitForm function 也有一条不存在的消息，您正在检查。

删除它后，它似乎一切正常。

 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>

Answer 2

如果您打算使用required的属性，您可以使用input:invalid selector in CSS

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

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

但是，在许多情况下，需要更全面的表单验证，在这种情况下，应避免required的属性，并且可以通过对它们应用 css class 来手动设置无效字段的样式：

 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>

PS 避免使用内联 styles，尽可能使用 css 类。

Answer 3

如何让星星打字时红色消失？

 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>