Validate additional property as email only

script.js

<script>
  document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
      const emailInput = document.querySelector('input[name="2-8330456/tour_contact_email"]');

      emailInput.addEventListener("input", function() {
        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        const parentDiv = emailInput.closest('.input');
        let messageDiv = parentDiv.querySelector('.email-error');

        // If the message div doesn't exist, create it
        if (!messageDiv) {
          messageDiv = document.createElement('div');
          messageDiv.className = 'email-error';
          parentDiv.appendChild(messageDiv);
        }

        if (!emailPattern.test(emailInput.value)) {
          messageDiv.textContent = "Please enter a valid email address.";
          emailInput.setCustomValidity("Invalid email address.");
        }else {
          messageDiv.textContent = ""; // Clear the error message
          emailInput.setCustomValidity(""); // Clear the custom validity
        }
      });
    }, 2000);
  });
</script>