<!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 form = document.querySelector("form[name='myform']");
      form.addEventListener("invalid", validation, true);
      form.addEventListener("input", checkval);
    }
    function validation(event) {
      const element = event.target;
      element.style.background = "#FFDDDD";
    }
    function sendit() {
      const form = document.querySelector("form[name='myform']");
      form.requestSubmit();
    }
    function checkval(event) {
      const element = event.target;
      if (element.validity.valid) {
        element.style.background = "#FFFFFF";
      } else {
        element.style.background = "#FFDDDD";
      }
    }
    window.addEventListener("DOMContentLoaded", initiate);
  </script>
</head>
<body>
  <section>
    <form name="myform" method="get" action="process.php">
      <p><label>Nickname: <input pattern="[A-Za-z]{3,}" name="nickname" id="nickname" maxlength="10" required></label></p>
      <p><label>Email: <input type="email" name="myemail" id="myemail" required></label></p>
      <p><button type="button" id="send">Sign Up</button></p>
    </form>
  </section>
</body>
</html>