I'm really struggling to get my form validation to work. I'm very new to JS so I'm not sure where I got it wrong. I tried looking through but still couldn't figure it out. Please help.
Here is my JS
const fname = document.querySelector("#fname")
const lname = document.querySelector("#lname")
const email = document.querySelector("#email")
const password = document.querySelector("#password")
const phoneNumber = document.querySelector("#phone-number")
form.addEventListener("submit", (e) => {
e.preventDefault();
});
function checkInputs() {
const fnameValue = fname.value;
const lnameValue = lname.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const phoneNumberValue = phoneNumber.value.trim();
if(fname.value === "") {
setErrorFor(fname, "This field cannot be blank");
} else {
setSuccessFor(fname);
}
}
function setErrorFor(input, message) {
const inputContainer = input.parentElement;
const small = inputContainer.querySelector("small");
small.innerText = message;
inputContainer.classList.add("has-error");
}
Here is my HTML
<div class="input-container-first-name">
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text">
<small>Error message</small>
</div>
It like Andy comment, you not calling checkInputs, make something like this:
const fname = document.querySelector("#fname")
const lname = document.querySelector("#lname")
const email = document.querySelector("#email")
const password = document.querySelector("#password")
const phoneNumber = document.querySelector("#phone-number")
form.addEventListener("submit", (e) => {
e.preventDefault();
checkInputs()
});
function checkInputs() {
const fnameValue = fname.value;
const lnameValue = lname.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const phoneNumberValue = phoneNumber.value.trim();
if (fname.value === "") {
setErrorFor(fname, "This field cannot be blank");
} else {
setSuccessFor(fname);
}
}
function setErrorFor(input, message) {
const inputContainer = input.parentElement;
const small = inputContainer.querySelector("small");
small.innerText = message;
inputContainer.classList.add("has-error");
}
const fname = document.querySelector("#fname")
const lname = document.querySelector("#lname")
const email = document.querySelector("#email")
const password = document.querySelector("#password")
const phoneNumber = document.querySelector("#phone-number")
const form = document.querySelector("#form")
form.addEventListener("submit", (e) => {
e.preventDefault();
checkInputs()
});
function checkInputs() {
const fnameValue = fname.value;
if (fnameValue === "") {
setErrorFor(fname, "This field cannot be blank");
} else {
setSuccessFor(fname);
}
}
function setErrorFor(input, message) {
const inputContainer = input.parentElement;
const small = inputContainer.querySelector("small");
small.innerText = message;
inputContainer.classList.add("has-error");
}<div class="input-container-first-name">
<form id="form">
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text">
<small>Error message</small>
<button type="submit">Submit</button>
</form>
</div>in this code checkInputs are calling on your submit event.