trigger animation using Javascript when required fields are filled

Question

I want to implement the function when the user tries to click on the submit button, there's a condition when the user did complete all the required fields, the button will be animated which indicate success. The second one is when the user doesn't fill the required field, the button will not do any animation.

I uploaded it on codepen:
https://codepen.io/amrlamin/pen/dyyQyvj

Here's the js code:

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');
  }
});

However, I got confused and need a help. For now, the required attribute will trigger if the input field is not filled in by the user like what I want. The issue is when the user is already filled the input, the animation won't load.

Answer 1

1. ”...when the user tries to click on the submit button, there's a condition when the user did complete all the required fields, the button will be animated which indicate success”

What you currently see in action is the validation of the HTML standard. By default the browser will show a message when a field is required and has no input.

If hypothetically you would like to trigger your own custom animation instead you can use the novalidate attribute on the HTML element and write your own validation. For that you would also have to capture the submit event as explained in the next section of this answer.

2. ”...The issue is when the user is already filled the input, the animation won't load.”

So in this case it's the happy flow. The reason the animation is not showing is because the form will just succeed.

If you want something to happen prior to that event, as for example have some custom form validation to happen, you will have to capture a form submit event . An example is explained in this stack overflow answer . (I will use the example of this stack overflow answer in the next section's code example.)

Once you have captured the event, then you could validate or modify the classes before 'submitting' that event.

Example:

In other words, the practical example: 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);
}

The main concept that's different from your example is to use the form's submit event rather than the button.