title: Email Validation: JavaScript
body: <p>I'm trying to create a form that validates the email address.  Either the "submit" button is not working or else it is the email validation script that is causing the problem.  I'm new to coding and need some help.  Thank you in advance!</p>
  
  <pre><code>&lt;!doctype html&gt; 
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;JQuery Lesson&lt;/title&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;script        type="text/javascript"    
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt; 
  &lt;/script&gt;
      &lt;style&gt;  
          #wrapper{
          margin: 0 auto;
          width: 500px;
          font-family: helvetica; 
          font-size: 1.2em;
          }
          #error {
          color: red;
          margin: 20px;
          }   
          #email {
          height: 30px;
          width: 300px;
          border-radius: 20px;
          padding-top: 10px;  
          margin-bottom: 15px;
          font-size: 1.2em;
          float: none;
          margin: 0 auto;
          }
          #phone {
          height: 30px;
          width: 300px;
          border-radius: 20px;
          padding-top: 10px; 
          margin-bottom: 15px;
          font-size: 1.2em;
          float: none;
          margin: 0 auto;
          }
          #password {
          height: 30px;
          width: 300px;
          border-radius: 20px;
          padding-top: 10px; 
          margin-bottom: 15px;
          font-size: 1.3em;
          float: none;
          margin: 0 auto;
          }
          #confirmPassword {
          height: 30px;
          width: 300px;
          border-radius: 20px;
          padding-top: 10px; 
          margin-bottom: 15px;
          font-size: 1.3em;
          float: none;
          margin: 0 auto;
          }
          .spacer {
          font-size:0;
          height: 20px; 
          line-height: 0;
          }
          label {
          width: 90px;
          float:left;
          padding-top: 10px;
          }
          #submitButton {
          height: 30px; 
          width: 90px; 
          font-size: 1.1em;
          float: none;
          margin: 0 auto;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id= "wrapper"; &gt;
          &lt;form id = "validationForm"&gt;
              &lt;div id = "error"&gt;&lt;/div&gt;
              &lt;label for = "email"&gt; Email &lt;/label&gt;
              &lt;input id = "email" /&gt;
              &lt;div class="spacer"&gt;&lt;/div&gt;
              &lt;label for = "phone"&gt; Phone &lt;/label&gt;
              &lt;input id = "phone" /&gt;
              &lt;div class="spacer"&gt;&lt;/div&gt;
              &lt;label for = "password"&gt; Password &lt;/label&gt;
              &lt;input id = "password", type = "password" /&gt;
              &lt;div class="spacer"&gt;&lt;/div&gt;
              &lt;label for = "confirm password"&gt; Confirm Password &lt;/label&gt;
              &lt;input id = "confirmPassword", type = "password" /&gt;
              &lt;div class="spacer"&gt;&lt;/div&gt;
              &lt;button id = "submitButton" type="submit" value="submit"&gt; Submit  
  &lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;script&gt;
          function validateEmail(email) {
              var re = /^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|
  (".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-
  9]+\.)+[a-zA-Z]{2,}))$/;
              return re.test(email);
          };
              if (!validEmail($("#email").val()))) {
                      $("#error").html("Please enter a valid email address.");
              }   
          ;
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>