Quiero cambiar el color del borde a rojo después de enviar el formulario si el campo está vacío.
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>También traté de agregar una clase en javascript para elementos de entrada, cuando no son válidos. Pero no funcionó. Sé que hay muchas maneras de hacerlo, pero revisé y no pude hacer que funcionaran en mi formulario. :(
No puedo entender lo que me estoy perdiendo, ¿pueden ayudarme por favor? ¡Gracias!
Ya casi has llegado, pero tienes un par de cosas un poco mal. En primer lugar, no tiene un botón de envío. Entonces, incluso si tuviera uno, no podría enviar un formulario con ninguno de los campos vacíos porque los marcó todos como required . Además, la función de submitForm de formulario tiene un mensaje inexistente que está comprobando.
Después de quitarlo todo parece funcionar bien.
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>Si planea usar el atributo required , puede usar input:invalid en CSS
input:invalid { border: 2px solid pink; }Esto diseñará automáticamente los elementos sin necesidad de enviar el formulario.
Sin embargo, en muchos casos, se requiere una validación de formulario más completa, en cuyo caso se debe evitar el atributo required y se puede diseñar manualmente un campo no válido aplicándoles una clase 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>PD Evite usar estilos en línea, use clases css cuando sea posible en su lugar.