javascript - 填写必填字段时使用 Javascript 触发动画

Question

我想在用户尝试点击提交按钮时实现该功能，条件是当用户完成所有必填字段时，按钮将显示动画以指示成功。第二个是当用户没有填写必填字段时，按钮不会做任何动画。

我上传到codepen:
https://codepen.io/amrlamin/pen/dyyQyvj

这是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 属性。问题是当用户已经完成输入时，动画不会加载。

Answer 1

<强>1。 “...当用户尝试点击提交按钮时，如果用户确实完成了所有必填字段，则按钮将显示动画以指示成功”

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

如果假设您想触发自己的自定义动画，您可以使用 novalidate attribute on the HTML element并编写您自己的验证。为此，您还必须按照本答案下一节中的说明捕获提交事件。

<强>2。 “...问题是当用户已经完成输入时，动画不会加载。”

所以在这种情况下，它是快乐的流程。动画没有显示的原因是表单会成功。

如果您希望在该事件之前发生某些事情，例如发生一些自定义表单验证，您将必须捕获 form submit event .举例说明in this stack overflow answer . (我将在下一节的代码示例中使用这个堆栈溢出答案的示例。)

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

示例:

换句话说，实际例子:https://codepen.io/studiospindle/pen/qBBLXee

/* 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);
}

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