表单验证:在输入中按键后删除错误

Form validation: remove error after onkeydown in input

本文关键字：删除 错误 验证 输入 表单      更新时间：2023-09-26

我正在做我的第一个验证，真的很基本。

如果您将"用户名"输入留空，它将用户名输入边框变为红色，并在输入中放置警报图标。

我正在尝试"删除"用户开始输入导致错误的输入后验证失败时添加的内容。

因此，场景是：用户将用户名留空，单击提交，然后用户名输入的边框变为红色，并显示错误图标。然后他们返回并将他们的用户名添加到用户名输入中，在他们在用户名框中键入的第一个字符之后，我希望红色边框和错误图标消失。

但是我的尝试失败了

我的小提琴

.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

太长了，在小提琴:)

你可以在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';
}

这里是小提琴：https://jsfiddle.net/12apmo5j/12/

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

相关文章：