Use input and submit events to provide real-time feedback and validation when users fill out a form.

Use Case: Real-time Username Validation

You want to check if the username is at least 5 characters long and show an error message if it's not.

Example:

<form id="signupForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <span id="error" style="color: red; display: none;">Username must be at least 5 characters.</span>
  <button type="submit">Submit</button>
</form>

<script>
  const usernameInput = document.getElementById('username');
  const errorSpan = document.getElementById('error');
  
  usernameInput.addEventListener('input', function() {
    if (usernameInput.value.length < 5) {
      errorSpan.style.display = 'inline';
    } else {
      errorSpan.style.display = 'none';
    }
  });
  
  document.getElementById('signupForm').addEventListener('submit', function(event) {
    if (usernameInput.value.length < 5) {
      alert("Username is too short!");
      event.preventDefault();
    }
  });
</script>