PHONE OR EMAIL REQUIRED

by Lucille Kenney

HTML

<form autocomplete="off" method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" action="" id="hw4Form" name="hw4Form">
        
        

          <!-- Reformat 10 digits (in a row) to xxx-xx-xxxx: -->
            <br>
            <label for="phone">Phone</label>
            <input type="text" id="phone" name="phone" value="">          
            <!--<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}"
            type="text">-->
            <br>
            <span id="msg">Need 10 digits (in a row)</span>
          <br>
          <br>

          <!-- Email pattern = .+, one or more characters; @ then an '@' sign; .+ then one or more characters; \. then a dot; .+ then one or more characters after the dot-->
          <label for="email">Email</label>
          <input placeholder="Email address" id="email" name="email" type="email" pattern=".+@.+\..+"><br>
          <br>
              <span id="error"></span>
              <br><br>
          <button type="submit" id="submitBtn" name="submit">Register Me!</button><br>

    </div><!--end formDiv-->
    
    
</form>

JavaScript

var phone = document.getElementById("phone");
  var email = document.getElementById("email");
  var myForm = document.getElementById("hw4Form");
  var error = document.getElementById("error");

          error.innerHTML = "";


    myForm.addEventListener("submit", function(e){
        if((phone.value == "") && (email.value == "")){
            //alert("Either phone number or email are required");
            error.innerHTML = "Error: You Must Enter an Email or Phone Number!";
            e.preventDefault();
        } else {
          //error.innerHTML = "Error: You Must Enter an Email or Phone Number!";
          error.innerHTML = "";
          return false;
      }
  });