验证失败时，如何将输入边框颜色设置为红色?(仅限Vanilla JavaScript)

Question

因此，我在表单上有一些文本输入，当用户试图提交表单时，如果输入不符合特定条件，我希望使边框变红。条件是字段不能为空，如果为空，表单会将用户带回字段并显示红色边框。

以下是我到目前为止得到的，但不仅样式没有显示，字段也消失了。

我需要更改什么？

const submitButton = document.getElementById('submitButton');
const name = document.getElementById('name');
const email = document.getElementById('email');
function nameValidation() {
if (name.value == 0) {
name.style.borderColor = "red solid 5px";
}
}
function emailValidation() {
if (email.value == 0) {
email.style.borderColor = "red solid 5px";
}
}
submitButton.addEventListener('click', () => {
nameValidation();
emailValidation();
});

<form action="index.html" novalidate>
<fieldset>

<label for="name">Name:</label>
<input type="text" id="name">
<label for="mail">Email:</label>
<input type="email" id="email">

</fieldset>

<button id="submitButton">Register</button>
</form>

Answer 1

HTML按钮有一个默认行为，因此它会刷新整个页面，这就是表单消失的原因。为了防止这种情况，您只需要使用event.prventDefault((，就像我下面在Submit按钮事件处理程序函数中所做的那样。

其次，您的CSS不适用的原因是您试图将"5px solid"添加到边框颜色CSS属性中。边框颜色只接受颜色作为输入。如果您需要设置其他属性，则需要在边界上进行设置。

此外，您正在比较name.value和email.value的值为0。您应该使用空字符串"来执行此操作。然而，在Javascript中，空字符串是一个错误的值，所以即使你只说name.value和value是空字符串("(，那么在if条件中它也是错误的。您所需要做的就是如果(！name.value(，也就是说，如果名称.value不为true，那么执行条件。

const submitButton = document.getElementById('submitButton');
const name = document.querySelector('#name');
const email = document.querySelector('#email');
function nameValidation() {
if (!name.value) {
name.style.border = '5px solid';
name.style.borderColor = 'red';
}
}
function emailValidation() {
if (!email.value) {
email.style.border = '5px solid';
email.style.borderColor = 'red';
}
}
submitButton.addEventListener('click', e => {
e.preventDefault();
nameValidation();
emailValidation();
});

<form action="index.html" novalidate>
<fieldset>
<label for="name">Name:</label>
<input type="text" id="name" />
<label for="mail">Email:</label>
<input type="email" id="email" />
</fieldset>
<button id="submitButton">Register</button>
</form>