提交后更改無效輸入的邊框顏色

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>