I want to change the border color in red after the form is submitted if the field is empty.
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>I also tried to add a class in javascript for input elemets, when they are invalid. But it didn't work. I know there are plenty ways to do it, but I checked and I couldn't make them work on my form. :(
I can't figure it out what I am missing, can you help me please? Thank you!
You're almost there but you got a couple of things a bit wrong. First off you don't have a submit button. Then even if you had one you wouldn't be able to submit a form with any of the fields empty because you marked them all as required. Also the submitForm function has a non-existent message that you're checking.
After removing it it all seems to work fine.
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>If you are planning on using required attribute, you can use input:invalid selector in CSS
input:invalid
{
border: 2px solid pink;
}
This will automatically style the elements without need submitting the form.
However in many cases there is a more comprehensive form validation required in which case required attribute should be avoided and an invalid field can be manually styled by applying a css class to them:
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>P.S. Avoid using inline styles, use css classes when possible instead.