填写表单字段后，如何从中删除错误

Question

所以我正在构建一个需要用户填写字段的表单。如果没有，或者填写错误，字段周围将有一个红色边框，并显示一条错误消息，告诉用户重试。

到目前为止，它是有效的，但问题是，在他们填充字段并从字段中移除焦点后，它不会移除红色边界。

我的代码在下面。

在用户输入有效信息后和提交之前，我需要在JavaScript函数中更改什么才能使红色边框和错误消息立即消失？

---请只使用香草javascript，不使用jQuery---

const errorMessage1 = document.getElementById('errorMessage1');
const submitButton = document.getElementById('submitButton');
const name = document.getElementById('name');
const email = document.getElementById('mail');
function nameAndEmailValidation() {
if (name.value === '' && email.value === '') {
name.style.border = '7px solid';
name.style.borderColor = 'red';
email.style.border = '7px solid';
email.style.borderColor = 'red';
errorMessage1.style.display = "block";
} else if (name.value === '') {
name.style.border = '7px solid';
name.style.borderColor = 'red';
errorMessage1.style.display = "block";
} else if (email.value === '') {
email.style.border = '7px solid';
email.style.borderColor = 'red';
errorMessage1.style.display = "block";
} else {
email.removeAttribute('border');
email.removeAttribute('borderColor');
errorMessage1.style.display = "none";
}
}
submitButton.addEventListener('click', (e) => {
if (!nameAndEmailValidation()) {
e.preventDefault();
}
});

<form id="form" action="index.html" method="post" novalidate>
<fieldset id="infoSection">
<h3 id="errorMessage1" style="display: none;">
Enter all required information.
</h3>
<legend>Who Are You?</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user-name" required>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user-email" required>

<button style="font-size:18px" type="submit" id="submitButton">Submit</button>

</fieldset>
</form>

Answer 1

我已经从根本上更改了您的js代码。只有在单击按钮后，验证才能开始工作(这是正确的(。添加了一个onintup事件，用于检测输入占用情况。然而，我将字段名称更改为更正确的名称——从user-name更改为name，还将user-email更改为email。请参见示例。

const errorMessage1 = document.getElementById('errorMessage1');
const submitButton = document.getElementById('submitButton');
const name = document.getElementById('name');
const email = document.getElementById('mail');
function nameAndEmailValidation() {    
if (name.value === '') {
name.style.border = '7px solid';
name.style.borderColor = 'red';
} else {
name.style.border = '';
name.style.borderColor = '';
}

if (email.value === '') {
email.style.border = '7px solid';
email.style.borderColor = 'red';
} else {
email.style.border = '';
email.style.borderColor = '';
}

if (name.value === '' || email.value === '') {
errorMessage1.style.display = "block";
} else {
errorMessage1.style.display = "none";
}
}

name.oninput = function () {
nameAndEmailValidation();
}
email.oninput = function () {
nameAndEmailValidation();
}
submitButton.addEventListener('click', (e) => {
e.preventDefault();

nameAndEmailValidation();

});

<form id="form" action="index.html" method="post" novalidate>
<fieldset id="infoSection">
<h3 id="errorMessage1" style="display: none;">
Enter all required information.
</h3>
<legend>Who Are You?</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="mail">Email:</label>
<input type="email" id="mail" name="email" required>

<button style="font-size:18px" type="submit" id="submitButton">Submit</button>

</fieldset>
</form>

Answer 2

下面的代码只是一个如何检查输入值的示例，如果它被设置为''nothing，则显示错误并将顺序设置为红色并显示错误消息，否则，如果输入值实际上被设置为非''，则将边界设置为绿色并删除错误消息。

我认为在验证方面应该有更多的参与。对于名称检查，某些东西的简单值可能很好，但是检查电子邮件应该使用正则表达式进行特定验证。

此外，您可能希望检查实际input字段的blur验证，而不是提交按钮。。。这将在css验证方面显示或删除错误消息和css颜色值，无需按下按钮，但需要填写有问题的输入。

例如 用户填写名称字段，当他们删除对名称字段的关注并移动电子邮件字段时，JS会触发并添加或删除与关注字段相关的错误消息和css颜色。

const errorMessage1 = document.getElementById('errorMessage1');
const submitButton = document.getElementById('submitButton');
const name = document.getElementById('name');
const email = document.getElementById('mail');
let err = document.getElementById('err');
function nameAndEmailValidation() {
//check if the name field is empty, if it is set background and text color to red
if (name.value === '') {
name.style.borderColor = 'red';
nameErr.style.color = 'red';
nameErr.textContent = 'Please fill out Name field';
} else { // else set background and text color to green and remove error text
name.style.borderColor = 'green';
nameErr.textContent = '';
}
if (email.value === '') {
email.style.borderColor = 'red';
emailErr.style.color = 'red';
emailErr.textContent = 'Please fill out Email field';
} else {
email.style.borderColor = 'green';
emailErr.textContent = '';
}
}
submitButton.addEventListener('click', (e) => {
if (!nameAndEmailValidation()) {
e.preventDefault();
}
});

<form id="form" action="index.html" method="post" novalidate>
<fieldset id="infoSection">
<h3 id="errorMessage1" style="display: none;">
Enter all required information.
</h3>
<legend>Who Are You?</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user-name" required>
<p id="nameErr"></p>
<label for="mail">Email:</label>
<p id="emailErr"></p>
<input type="email" id="mail" name="user-email" required>
<button style="font-size:18px" type="submit" id="submitButton">Submit</button>
</fieldset>
</form>