title: validate form with javascript with a validation expression
body: <p>So I have a form and I am trying to validate it to make sure no other characters are submitted  I know theirs a validation expression but I do not know how to apply it.I just want it where if the user puts any invalid character that may interfere then it just return false. I tried but it does not seem to work, also please help me make my code  more efficient if there is any way thank you</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 validateForm() {
      var name = document.forms["theForm"]["fname"].value;
      var lastName = document.forms["theForm"]["lname"].value;
      var email = document.forms["theForm"]["femail"].value;
      var subject = document.forms["theForm"]["subject"].value;
      
      if  (name == "") {
      
       window.alert("Missing First Name.");
       name.focus();
       return false;
      }
      
      if (lastName == "") {
          alert("Missing Last Name");
          return false;
      }
      
      if (email == "") {
          alert("Missing Email");
          return false;
      }
      
      if (subject == "") {
          alert("Incomplete Action");
          return false;
      }
      
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
    }
  
    input[type=submit] {
      background-color: #993b3b;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  
    input[type=submit]:hover {
      background-color: #B0B0B0;
    }
  
    .formCont {
      text-align: left;
      margin: 152.5px 0;
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="formCont"&gt;
        &lt;form name="theForm" onsubmit="return validateForm()" method="post"&gt;
        &lt;label for="fname"&gt;First Name&lt;/label&gt;
        &lt;input type="text" id="fname" name="firstname" placeholder="Your name.."&gt;
  
        &lt;label for="lname"&gt;Last Name&lt;/label&gt;
        &lt;input type="text" id="lname" name="lastname" placeholder="Your last name.."&gt;
  
        &lt;label for="femail"&gt;Email&lt;/label&gt;
        &lt;input type="text" id="femail" name="Email" placeholder="Your email.."
  
  
        &lt;label for="subject"&gt;Subject&lt;/label&gt;
        &lt;textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"&gt;&lt;/textarea&gt;
  
        &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>