title: How to implement checkValidity() in forms?
body: <p>I don't know why <code>checkValidity()</code> method is not checking if my input is <code>true</code> or <code>false</code>. My program said that <code>checkValidity()</code> is not a function... My program was working but the <code>checkValidity()</code> debug my program.</p>
  
  <p>I tried to make a program that adds data in tables and checks that the input is valid or invalid. Every time you click the process button, data gets added to a table and the reset will erase the input and clears the table.</p>
  
  <p>My professor familiarize me in using the <code>checkValidity()</code> method to ensure the input is valid. I don't know if my program has an error or the browser does not support the <code>checkValidity</code> method?</p>
  
  <p>I use latest version of Chrome. Can Everyone check my code if there's an error and teach me how to implement <code>checkValidity</code> method?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;&lt;title&gt;Sales Person&lt;/title&gt;
  
  &lt;!-- Latest compiled CSS --&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="css/bootstrap-theme.min.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
      &lt;form name="myform" onsubmit="validateForm return false;"&gt;
      &lt;div class="row"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="name"&gt;Sales Person:&lt;/label&gt;   
              &lt;input type="text" id = "name" placeholder="Enter Your Name"     required&gt;&lt;br/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="form-group"&gt;
          &lt;label for="product1"&gt;Product 1:&lt;/label&gt;
          &lt;input type="number" id = "product1" placeholder="Enter Product 1"&gt;&lt;br/&gt;
             &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="product1"&gt;Product 2:&lt;/label&gt;
              &lt;input type="number" id = "product2" placeholder="Enter Product 2" &gt;&lt;br/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="product1"&gt;Product 3:&lt;/label&gt;
              &lt;input type="number" id = "product3" placeholder="Enter Product 3" &gt;&lt;br/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="product1"&gt;Product 4:&lt;/label&gt;
              &lt;input type="number" id = "product4" placeholder="Enter Product 4" &gt;&lt;br/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
         &lt;div class="row"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="product1"&gt;Product 5:&lt;/label&gt;
              &lt;input type="number" id = "product5" placeholder="Enter Product 5" &gt;&lt;br/&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
              &lt;input type="submit" class="btn btn-default" onclick="Process()" value="Submit"&gt;
          &lt;/div&gt;
            &lt;div class="col-md-3"&gt;
              &lt;input type="reset" class="btn btn-default" onclick="erase()" value="Reset"&gt;
          &lt;/div&gt; 
      &lt;/form&gt;
  &lt;/div&gt;
  
  
      &lt;div class="col-md-8" id="sales_table"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  "use strict";
  var table = "";
  var table_header = "";
  var table_body = "";
  var table_footer = "";
  
  table_header += "&lt;table class= table table-bordered&gt;";
  table_header += "&lt;tr&gt;";
  table_header += "&lt;th class='text-center'&gt;Name&lt;/th&gt;";
  table_header += "&lt;th class='text-center'&gt;Product 1&lt;/th&gt;";
  table_header += "&lt;th class='text-center'&gt;Product 2&lt;/th&gt;";
  table_header += "&lt;th class='text-center'&gt;Product 3&lt;/th&gt;";
  table_header += "&lt;th class='text-center'&gt;Product 4&lt;/th&gt;";
  table_header += "&lt;th class='text-center'&gt;Product 5&lt;/th&gt;";
  table_header += "&lt;th class='text-center'&gt;Total Sale Product&lt;/th&gt;";
  table_header += "&lt;th class='text-center'&gt;Commissions&lt;/th&gt;";
  table_header += "&lt;tr&gt;";
  
  table_footer += "&lt;/table&gt;";
  function Process()
  {
      var sales_table = document.getElementById("sales_table").value;
      var name=document.getElementById("name").value;
      var product1=parseInt(document.getElementById("product1").value);
      var product2=parseInt(document.getElementById("product2").value);
      var product3=parseInt(document.getElementById("product3").value);
      var product4=parseInt(document.getElementById("product4").value);
      var product5=parseInt(document.getElementById("product5").value);
       var sales_table = document.getElementById("sales_table");
      var total;
      var commissions;
  
  if(isValid(name,product1,product2,product3,product4,product5)){
          total = product1+product2+product3+product4+product5;
          commissions = total * .30;
  
          table_body += "&lt;tr&gt;";
          table_body += "&lt;td&gt;"+name+"&lt;/td&gt;";
          table_body += "&lt;td class='text-center'&gt;" + product1.toFixed(2) + "&lt;/td&gt;";
          table_body += "&lt;td class='text-center'&gt;" + product2.toFixed(2) + "&lt;/td&gt;";
          table_body += "&lt;td class='text-center'&gt;" + product3.toFixed(2) + "&lt;/td&gt;";
          table_body += "&lt;td class='text-center'&gt;" + product4.toFixed(2) + "&lt;/td&gt;";
          table_body += "&lt;td class='text-center'&gt;" + product5.toFixed(2) + "&lt;/td&gt;";
          table_body += "&lt;td class='text-center'&gt;" + total.toFixed(2) + "&lt;/td&gt;";
          table_body += "&lt;td class='text-center'&gt;" + commissions.toFixed(2) + "&lt;/td&gt;";
          table_body += "&lt;/tr&gt;";
  
          table = table_header + table_body + table_footer;
  
          sales_table.innerHTML = table;
      }
  
  }
  
  function isValid (name,product1,product2,product3,product4,product5) {
      try{
      if(name.checkValidity==false){
        throw name.validationMessage
      }
      if(product1.checkValidity==false){
        throw product1.validationMessage
      }
      if(product2.checkValidity==false){
        throw product2.validationMessage
      }
      if(product3.checkValidity==false){
        throw product3.validationMessage
      }
      if(product4.checkValidity==false){
        throw product4.validationMessage
      }
      if(product5.checkValidity==false){
        throw product5.validationMessage
       }
      }
      catch(err){
          alert(err);
          return false;
      }
      return true;
  }
  
  function erase()
  {
      document.getElementById("name").value="";
      document.getElementById("product1").value="";
      document.getElementById("product2").value="";
      document.getElementById("product3").value="";
      document.getElementById("product4").value="";
      document.getElementById("product5").value="";
      document.getElementById("sales_table").innerHTML="";
      }
  
    &lt;/script&gt;
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>