Javascript表单验证不工作，不确定我在哪里出错

Question

我真的很难让我的表单验证工作。我是JS的新手，所以我不确定我错在哪里。我试着翻阅，但还是看不懂。请帮助。

这是我的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");
}

这是我的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>

Answer 1

就像Andy评论的那样，你不叫checkInputs，做这样的东西:

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>

在这段代码中checkInputs调用你的submit事件