填写完成后如何从表单字段中删除错误？

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，则显示错误并将顺序设置为红色并显示错误消息，否则如果输入的值实际上设置为 '' 以外的其他值，然后将边框设置为绿色并删除错误消息。

我认为这里应该在验证方面涉及更多内容。对于名称检查简单值可能没问题，但是检查电子邮件应使用正则表达式的特定验证来验证电子邮件。

此外，您可能希望在 blur 上检查实际 input 字段的验证，而不是提交按钮...这将显示或删除 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>