"Troubleshooting a CSS Animation Problem: Button Animation Glitch

Question

"Troubleshooting a CSS Animation Problem: Button Animation Glitch

I was working on a code snippet with the following structure:

shakingErr class from CSS was not being applied correctly when the user clicked submit with empty/wrong fields. How can this be resolved so that the shaking error animation is triggered properly?

Additionally, there's another animation that plays on the button click. What changes can be made to only trigger this animation after all input fields are filled correctly? 

Desired Outcome
To better understand the requirements, refer to the video demonstration at this link. The goal is to have the error animation activate when the user tries to submit empty/wrong fields, while ensuring that the button animation is only activated upon successful form completion.

javascript html jquery css sass

Answer 1

Answer №1

First and foremost, I recommend updating the HTML structure of the submit button for better semantics:

<button class="button" type="submit">
   <div class="text">Submit</div>
</button>

Next, let's address what occurs when the user clicks on the submit button:

$(".button").click(function(e) {
  e.preventDefault();
  let validationOK = true;
  
  // Data validation
  const form = document.forms.myform;
    let data = Object.fromEntries(new FormData(form).entries())
    for (let entrie in data) {
      if (!form[entrie].checkValidity()) {
        validationOK = false;

        // Error animation
        form[entrie].classList.add('shakingErr')
        setTimeout(() => {
          form[entrie].classList.remove('shakingErr')
        }, 820)
      }
    }
    
  if (validationOK) {
    basicTimeline.play();

    // Execute the submit action here
  }
});

// JavaScript code snippet with animations and timeline setup goes here...

// CSS styling for contact form elements, buttons, and animations...

<!DOCTYPE html>
<html>

<head>
  // Head section content goes here...
</head>

<body>
  <!-- Contact form section -->
  <section id="contact">
    // HTML content for contact form section...
  </section>
  <script src="script.js"></script>
</body>

</html>

An additional update is needed to ensure that input elements' border-color highlights correctly.

To fix this CSS issue, we should strengthen the error style override like so:

form .shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

Answer 2

First and foremost, I recommend updating the HTML structure of the submit button for better semantics:

<button class="button" type="submit">
   <div class="text">Submit</div>
</button>

Next, let's address what occurs when the user clicks on the submit button:

$(".button").click(function(e) {
  e.preventDefault();
  let validationOK = true;
  
  // Data validation
  const form = document.forms.myform;
    let data = Object.fromEntries(new FormData(form).entries())
    for (let entrie in data) {
      if (!form[entrie].checkValidity()) {
        validationOK = false;

        // Error animation
        form[entrie].classList.add('shakingErr')
        setTimeout(() => {
          form[entrie].classList.remove('shakingErr')
        }, 820)
      }
    }
    
  if (validationOK) {
    basicTimeline.play();

    // Execute the submit action here
  }
});

// JavaScript code snippet with animations and timeline setup goes here...

// CSS styling for contact form elements, buttons, and animations...

<!DOCTYPE html>
<html>

<head>
  // Head section content goes here...
</head>

<body>
  <!-- Contact form section -->
  <section id="contact">
    // HTML content for contact form section...
  </section>
  <script src="script.js"></script>
</body>

</html>

An additional update is needed to ensure that input elements' border-color highlights correctly.

To fix this CSS issue, we should strengthen the error style override like so:

form .shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

"Troubleshooting a CSS Animation Problem: Button Animation Glitch

Desired Outcome

Answer №1

Similar questions

Is it possible to change XML using Ajax technology?

Utilize Javascript to interpret a structure that resembles JSON

Automatically resizing a multi-part CSS background based on content dimensions

The column is experiencing difficulty in dividing evenly

Accessing UPI apps such as Google Pay through deep linking from a web application

Why will the experimental activation of React concurrent features in Nextjs 12 disable API routes?

What is the best way to showcase the outcome using the <table> tag in HTML with columns containing 50 records each, except for the final column?

I'm struggling to retrieve a specific column of data from a JSON file. Does anyone know how to do this successfully?

Why is my data not being sent to the controller in ASP.Net MVC when using @Ajax.ActionLink

Align the logo at the center of the webpage both vertically and horizontally

What is the best way to invoke a function in a class from a different class in Angular 6?

What causes the Invalid Form Body error to appear when using the Discord API?

Creating an array of objects using a constructor: a step-by-step guide

Failure to register Express Route

I encounter an error if an element is not displayed when using the isDisplayed() method

The ideal choice for a default background image in terms of style and dimensions

Regularly verify if a date has passed its expiration

Error encountered with the item properties in vue-simple-calendar 'classes'

Error: Functionality cannot be achieved

Searching through an array for multiple values on the same key