<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Forms</title>
  <script>
    function initiate() {
      const button = document.getElementById("send");
      button.addEventListener("click", sendit);

      const email = document.getElementById("myemail");
      email.addEventListener('input', validate);
    }
    function validate(event) {
      const button = document.getElementById("send");
      const form = document.querySelector("form[name='myform']");

      const valid = form.checkValidity();
      if (valid) {
        button.disabled = false;
      } else {
        button.disabled = true;
      }
    }
    function sendit() {
      const form = document.querySelector("form[name='myform']");
      form.requestSubmit();
    }
    window.addEventListener("DOMContentLoaded", initiate);
  </script>
</head>
<body>
  <section>
    <form name="myform" method="get" action="process.php">
      <p><label>Email: <input type="email" name="myemail" id="myemail" required></label></p>
      <p><button type="button" id="send" disabled>Sign Up</button></p>
    </form>
  </section>
</body>
</html>