title: Required attribute is not working for forms
body: <p>As a small beginner project for HTML, CSS and Javascript, I was tasked with making a website for a restaurant. However, when I tried using the <code>required</code> attribute in an <code>input</code> tag, it didn't work. Here is the page with the problems:</p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;form name = "loyalty1"&gt;
                  &lt;section id = "teal1"&gt;
                      &lt;h2&gt; Teal Level &lt;/h2&gt;
                      &lt;p&gt; Get $10 off for every third meal (must be above $50) from the restuarant. Get exclusive discounts for new meals. Price: $20 /month.&lt;/p&gt;
                      &lt;div id = "checkbox" style = "background-color: none"&gt;
                        &lt;input type = "checkbox" id = "teal"&gt;
                        &lt;label for ="teal" style = "margin-left: 0px"&gt; Buy Teal Level &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
                  &lt;section id = "aqua1"&gt;
                      &lt;h2&gt; Aqua Level &lt;/h2&gt;
                      &lt;p&gt; Get $15 off for every third meal (must be above $50) from the restaurant. Not only will you get exclusive discounts for new meals, and you will recieve amazing recipies! Price: $40/month.&lt;/p&gt;
                      &lt;div id = "checkbox" style = "background-color: none"&gt;
                        &lt;input type = "checkbox" id = "aqua" &gt;
                        &lt;label for ="aqua" style = "margin-left: 0px"&gt; Buy Aqua Level &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
                  &lt;section id = "turquoise1"&gt;
                      &lt;h2&gt; Turquoise Level &lt;/h2&gt;
                      &lt;p&gt; Get one meal free for every 3 meals above $50. You will also recieve exclusive discounts, new meals and attend private cooking and baking classes from our chefs! Price: $60/month. &lt;/p&gt;
                      &lt;div id = "checkbox" style = "background-color: none"&gt;
                        &lt;input type = "checkbox" id = "turquoise"&gt;
                        &lt;label for ="turquoise" style = "margin-left: 0px"&gt; Buy Turquoise Level &lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
                  &lt;div style = "display: inline; margin: 15px 580px"&gt;
                    Email: &lt;input type = "email" name = "userEmail" required&gt;
                    &lt;input type="submit" onclick="loyalty()" style = "margin: 15px 620px"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Javascript function:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function loyalty(){
    var email = document.loyalty1.userEmail.value;
  
    else
    {
      if ((document.getElementById("teal").checked == false) &amp;&amp; (document.getElementById("aqua").checked == false) &amp;&amp; (document.getElementById("turquoise").checked == false))
      {
        alert("Please select a loyalty level.")
      }
      else if (((document.getElementById("teal").checked == true) &amp;&amp; (document.getElementById("aqua").checked == true)) || ((document.getElementById("teal").checked == true) &amp;&amp; (document.getElementById("turquoise").checked == true)) || ((document.getElementById("aqua").checked == true) &amp;&amp; (document.getElementById("turquoise").checked == true))) {
        alert ("Please select only one loyalty level.")
      }
      else if (document.getElementById("teal").checked == true)
      {
            alert ("Thank you for choosing the Teal loyalty level. We will email you at " + email + " for further instructions.")
       }
      else if (document.getElementById("aqua").checked == true) {
          alert ("Thank you for choosing the Aqua loyalty level. We will email you at " + email  + " for further instructions.")
        }
      else if (document.getElementById("turquoise").checked == true) {
          alert ("Thank you for choosing the Turquoise loyalty level. We will email you at " + email + " for further instructions.")
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>On a different page on my website, the <code>required</code> attribute is working just fine, which is really confusing:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function feedback() {
    var email = document.feedback.userEmail.value;
    var comments = document.feedback.comment.value;
  
    if (comments == "")
    {
      alert("Please fill in the comment field.")
    }
  
    alert ("Thank you for your feedback. \n" + "Email: " + email + "\nComment: " + comments);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name = "feedbackForm" id = "feedback"&gt;
                      &lt;p&gt; Please enter your email: &lt;/p&gt;
                      &lt;input type = "email" id = "userEmail" required&gt;
  
                      &lt;p&gt; Please enter your feedback: &lt;/p&gt;
                      &lt;textarea rows = "4" columns = "50" name = "comment" form = "feedback"&gt;Enter text here&lt;/textarea&gt;
  
                      &lt;input type = "submit" style = "margin: 15px 620px" onclick = "feedback()"&gt;
                  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help! Thanks</p>