<!-- HTML Structure -->
<form id="signup-form">
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <span class="error" id="username-error"></span>
  </div>
  
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <span class="error" id="email-error"></span>
  </div>
  
  <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <span class="error" id="password-error"></span>
  </div>
  
  <button type="submit">Sign Up</button>
</form>

<script>
  // Get the form and input elements
  const form = document.getElementById('signup-form');
  const usernameInput = document.getElementById('username');
  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');
  
  // Get error message elements
  const usernameError = document.getElementById('username-error');
  const emailError = document.getElementById('email-error');
  const passwordError = document.getElementById('password-error');
  
  // Add submit event listener to the form
  form.addEventListener('submit', function(event) {
    // Prevent the form from submitting by default
    event.preventDefault();
    
    // Reset error messages
    usernameError.textContent = '';
    emailError.textContent = '';
    passwordError.textContent = '';
    
    // Flag to track if form is valid
    let isValid = true;
    
    // Validate username
    if (usernameInput.value.trim() === '') {
      usernameError.textContent = 'Username is required';
      isValid = false;
    } else if (usernameInput.value.length < 3) {
      usernameError.textContent = 'Username must be at least 3 characters';
      isValid = false;
    }
    
    // Validate email with a basic regex
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(emailInput.value)) {
      emailError.textContent = 'Please enter a valid email address';
      isValid = false;
    }
    
    // Validate password
    if (passwordInput.value.length < 8) {
      passwordError.textContent = 'Password must be at least 8 characters';
      isValid = false;
    }
    
    // If all validations pass, submit the form
    if (isValid) {
      alert('Form submitted successfully!');
      form.reset(); // Clear the form
      // In a real app, you might submit the form with:
      // form.submit();
    }
  });
  
  // Real-time validation for better user experience
  usernameInput.addEventListener('input', function() {
    if (usernameInput.value.length >= 3) {
      usernameError.textContent = '';
    }
  });
  
  emailInput.addEventListener('input', function() {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (emailRegex.test(emailInput.value)) {
      emailError.textContent = '';
    }
  });
  
  passwordInput.addEventListener('input', function() {
    if (passwordInput.value.length >= 8) {
      passwordError.textContent = '';
    }
  });
</script>