填充必填字段时使用Javascript触发动画

我想在用户尝试单击submit按钮时实现该功能，当用户完成所有必需字段时，该按钮将显示为动画，表示成功。第二个是当用户没有填写必填字段时，按钮将不会执行任何动画

我把它上传到代码笔上：

以下是js代码：

const button = document.querySelector('.button');
const submit = document.querySelector('.submit');

function toggleClass() {
    this.classList.toggle('active');
}

function addClass() {
    this.classList.add('finished');
}

document.addEventListener('button', function(){
  const name = document.getElementById('firstname').value;

  if (name != '') {
    button.addEventListener('click', toggleClass);
    button.addEventListener('transitionend', toggleClass);
    button.addEventListener('transitionend', addClass);
  } else {
    alert('error');
  }
});

然而，我感到困惑，需要帮助。目前，如果用户没有像我所希望的那样填写输入字段，那么将触发required属性。问题是，当用户已填充输入时，动画将不会加载。

1。“。。。当用户尝试单击“提交”按钮时，当用户完成所有必填字段时，会出现一个条件，该按钮将显示动画，表示成功“

您目前看到的是HTML标准的验证。默认情况下，当需要字段且没有输入时，浏览器将显示一条消息

如果假设您希望触发自己的自定义动画，则可以使用并编写自己的验证。为此，您还必须捕获提交事件，如本答案下一节所述

2.“。。。问题是，当用户已填充输入时，动画将不会加载。“

因此，在这种情况下，这是快乐的流动。动画不显示的原因是表单将刚刚成功

如果您希望在该事件发生之前发生某些事情，例如要进行一些自定义表单验证，则必须捕获一个。并举例说明。（我将在下一节的代码示例中使用此堆栈溢出答案的示例。）

捕获事件后，可以在“提交”该事件之前验证或修改类

示例：

换句话说，实际例子是：

---

与您的示例不同的主要概念是使用表单的提交事件而不是按钮。

什么是

文档。addEventListener（'button'，…）

？不应该是<代码>按钮。AdvestListNever（“点击”，……）/代码>不同的注释：你应该考虑的是UX。通过动画，您将阻止提交操作。一般来说，您希望这种情况尽快发生。然而，一个可能的用例是当您运行一个异步操作时，它需要一些时间才能完全执行。然后，您可以使用这样的动画来平滑等待时间。

/* note that in the HTML the form has the 'novalidate' attribute */
const form = document.getElementById('form');
const button = document.querySelector('.button');
const submit = document.querySelector('.submit');

function toggleClass() {
    this.classList.toggle('active');
}

function addClass() {
    this.classList.add('finished');
}

function processForm(event) {
    /* prevent the default submit action from happening */
    if (event.preventDefault) event.preventDefault();

    /* you won't have to check for the input element independently, you can check the event.target for this */
    const firstNameInput = event.target['firstname'];

    if (firstNameInput.value && firstNameInput.value != undefined) {
      button.addEventListener('click', toggleClass);
      button.addEventListener('transitionend', toggleClass);
      button.addEventListener('transitionend', addClass);

      /* manually set a timer to wait for the transition to finish */
      setTimeout(function(){
        /* Here you can submit the form again */
        form.submit();
      }, 5000); // 5000 milliseconds = 5 seconds

    } else {
      firstNameInput.classList.add('error');
    }

    /* You must return false to prevent the default form behavior */
    return false;
}

/*
 * Check if the form has an attachEvent method,
 * if yes, then execute our own processForm method
 */
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}