填寫必填字段時，使用 Javascript 觸發 animation

Question

當用戶嘗試單擊提交按鈕時，我想實現 function，當用戶完成所有必填字段時，有一個條件，該按鈕將被動畫化，表示成功。 第二個是當用戶沒有填寫必填字段時，按鈕不會做任何 animation。

我在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 屬性。 問題是當用戶已經填寫了輸入時，animation 將不會加載。

Answer 1

1. “......當用戶嘗試點擊提交按鈕時，有一個條件是用戶完成了所有必填字段，按鈕將被動畫表示成功”

您目前看到的是對 HTML 標准的驗證。 默認情況下，當字段為必填且沒有輸入時，瀏覽器會顯示一條消息。

如果假設您想觸發您自己的自定義 animation，您可以使用HTML 元素上的novalidate屬性並編寫您自己的驗證。 為此，您還必須捕獲提交事件，如本答案的下一部分所述。

2. “...問題是當用戶已經填寫了輸入時，animation 將無法加載。”

所以在這種情況下，這是快樂的流程。 animation 未顯示的原因是表單將成功。

如果您希望在該事件之前發生某些事情，例如發生一些自定義表單驗證，您將必須捕獲表單提交事件。 此堆棧溢出答案中解釋了一個示例。 （我將在下一節的代碼示例中使用此堆棧溢出答案的示例。）

捕獲事件后，您可以在“提交”該事件之前驗證或修改類。

例子：

換句話說，實際示例： 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);
}

與您的示例不同的主要概念是使用表單的提交事件而不是按鈕。