如何使我的验证字段变为红色和绿色

Question

我两天前就开始编码了。我正在为一份工作申请做一个项目，在这个项目中，我必须创建一个根据成功/错误而变为绿色和红色的表格，我使用了YouTube教程来指导我。一切都很顺利，直到我尝试为输入编写错误和成功类(即变红或变绿的字段(，点击提交后什么都没发生！

这是我迄今为止写的代码。我哪里错了？

HTML:

<div class="container">
<form class="form" id="form"; action="mailto:[e-mail]"
method="POST"
enctype="text/plain:
name="EmailForm>
<div class="form-control">
<label>Name</label>
<input type="text" name="Name" placeholder="Enter Your Name" id="name">
</div>
<div class="form-control">
<label>Email</label>
<input type="email" name="Email" placeholder="Enter Your Email" id="email">
</div>
<div class="form-control">
<label>Card</label>
<input type="tel" inputmode="numeric" pattern="[0-9s]{13,19}"
autocomplete="cc-number" maxlength="19"
placeholder="Enter A Proxy Credit Card Number" id="ccn">
</div>

<button type="submit"; style="background-color:#e70064;
border-color:#3c3c3b; color:#3c3c3b">Submit</button>

</form>
</div>

CSS：

* {
box-sizing: border-box;
}
body {
background-color:fff;
display:flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;


}
.container {
background-color:#89c82e;
border: 5px solid #3c3c3b;
border-radius:20px;
margin-top:15px;
margin-bottom:15px;
width:300px;
max-width:100%;

}
.form{
padding: 30px 40px;
font-family:"calibri"
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color:#e74c3c
}

JS:

const form = document.getElementById('form');
const name = document.getElementById('name');
const email = document.getElementById('email');
const ccn = document.getElementById('ccn');
form.addEventListener('submit', (e) => {
e.preventDefault();

checkInputs();
});
function checkInputs() {
// get the values from the inputs
const nameValue = name.value.trim();
const emailValue = email.value.trim();
const ccnValue = ccn.value.trim();

if(nameValue === "") {
// show error
// add error class
setErrorFor(name)
} else {
// add success class
setSuccessFor(name)
}
}
function setErrorFor(input) {
const formControl = input.parentElement; // .form-control

// add error class
formControl.classname = 'form-control error'
}

非常感谢！

Answer 1

通过进行

.form-control.error input {
border-color:#e74c3c
}

您正在设置任何类名为form-control error、内部有输入的div的边框颜色为红色。但默认情况下，div没有可见的边框。如果您希望输入字段根据成功/失败变为红色或绿色，请将输入设置为具有border-color。输入已经在js文件的顶部，您可以使用这些输入。

此外，在setErrorFor函数中，它是.className，而不是.classname。