javascript - 表单验证: remove error after onkeydown in input

Question

我正在做我的第一个验证，非常基本。

如果将“用户名”输入留空，则会将用户名输入边框变为红色，并在输入中放置一个警报图标。

一旦用户开始输入导致错误的输入，我就会尝试“删除”验证失败时添加的内容。

所以场景是:用户将用户名留空，单击提交，然后用户名输入的边框变为红色并出现错误出现图标。然后他们返回并在“用户名”框中输入第一个字符后将用户名添加到“用户名”输入中，我希望红色边框和错误图标消失。 p>

但是我的尝试失败了

My Fiddle

JS

function contactForm() {
  var theForm = document.forms.contact;
  var errorUsername = document.getElementById('username-error');
  var usernameInput = document.getElementById('username');

  theForm.onsubmit = function() {
    if (theForm.username.value === '') {
      errorUsername.style.display = 'block';
      usernameInput.className = 'form__input form__input--red rounded-4';
      return false;
    } else {
      theForm.username.onkeydown = function() {
        errorUsername.style.display = 'none';
        usernameInput.className = 'form__input rounded-4';
      };
      return true;
    };
  };

};
contactForm();

HTML

<form name="contact" action="#" novalidate>
  <div class="input__holder">
    <input id="username" name="username" type="text" class="form__input rounded-4" placeholder="Username">
    <div id="username-error" class="input__error">!</div>
  </div>
  <div class="input__holder">
    <input name="password" type="password" class="form__input rounded-4" placeholder="Password">
  </div>
  <div class="input__holder">
    <input name="email" type="text" class="form__input rounded-4" placeholder="E-mail">
  </div>
  <button type="submit" id="" class="submit-button rounded-4">Submit</button>
</form>

CSS

太长了，在 fiddle 中:)

Answer 1

您可以在 javascript 上添加类似的内容

document.onkeyup = function() {
    var errorUsername = document.getElementById('username-error');
    var usernameInput = document.getElementById('username');
    if (usernameInput.value.length === 0) return;
    errorUsername.style.display = 'none';
    usernameInput.className = 'form__input rounded-4';
}

这里是 fiddle : https://jsfiddle.net/12apmo5j/12/

我认为这可以解决您的问题:)