title: How to responsively get Javascript to validate information from HTML5 form textboxes?
body: <p>I am trying to build a functional Credit Card validation script for a demo assignment. I am attempting to get JavaScript to react to input as the focus() changes from text box to text box. Once I have the JavaScript reactive then I want to validate that data against specific parameters. </p>
  
  <p>I've tried adding onchange methods directly into the HTML5, but something won't work correctly. I am open to all suggestions, I've spent too long at a stalemate.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h2&gt;Payment
  &lt;img style="visibility: hidden" class="mastercard" 
  src="https://img.icons8.com/color/48/000000/mastercard.png"&gt;
  &lt;img style="visibility: hidden" class="visacard" 
  src="https://img.icons8.com/color/48/000000/visa.png"&gt;
  &lt;img style="visibility: hidden" class="discovercard" 
  src="https://img.icons8.com/color/48/000000/discover.png"&gt;
  &lt;img style="visibility: hidden" class="amexcard" 
  src="https://img.icons8.com/color/48/000000/amex.png"&gt;
  &lt;/h2&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="name-on-card"&gt;Name on Card&lt;/label&gt;
        &lt;input class="cc_name" type="text" name="card-name" class="form-control" placeholder=""&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="cc-number"&gt;Credit card number&lt;/label&gt;
        &lt;input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="16"&gt;
      &lt;/div&gt;
      &lt;div class=""&gt;
        &lt;select class="month_year_select" name="month" id="month"&gt;
          &lt;option value=""&gt;exp month&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class=""&gt;
        &lt;select class="month_year_select" id="year" name="year"&gt;
          &lt;option value=""&gt;exp year&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="CVV"&gt;
        &lt;label for="cc-cvv"&gt;CVV&lt;/label&gt;
        &lt;input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4"&gt;
      &lt;/div&gt;
        &lt;button type="submit" class="myButton"style = "float:right;"&gt;Place Order&lt;/button&gt;
    &lt;/form&gt;  
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    var creditError="Error with Credit Card information";
    var CWError="Error with CW";
  
  document.getElementbyID("cc-cvv").onchange=function(){function CWcheck()};
  
  document.getElementbyID("cc_number").onchange=function(){function creditCheck()};
  
  document.getElementbyID("cc_name").onchange=function(){function upperFunction()};
  
  
  function CWcheck()
    {
      if (document.forms["LeftCheck"]["cc-cvv"].value.length &lt; 3 ||document.forms["LeftCheck"]["cc-cvv"].value.length&gt;=5){
        alert(CWError);
        cdocument.forms["LeftCheck"]["cc-cvv"].value.value=" ";
      }
      else if(document.forms["LeftCheck"]["cc-cvv"].value.match(/^[A-Za-z]+$/)){
        alert(CWError);
        document.forms["LeftCheck"]["cc-cvv"].value=" ";
      }
      else if(document.forms["LeftCheck"]["cc-cvv"].value.match(/^[-+]?[0-9]+\.[0-9]+$/)) { 
        alert(CWError);
        document.forms["LeftCheck"]["cc-cvv"].value=" ";
      }
      else 
        break;
    }
  
  function upperFunction() {
    document.getElementsByClassName("cc_name").value.toUpperCase();
    }
  
  
  function creditCheck() {
    {
      if (document.forms["LeftCheck"]["cc_number"].value.length &lt; 15 ||document.forms["LeftCheck"]["cc_number"].value.length&gt;16){
        alert(creditError);
        document.forms["LeftCheck"]["cc_number"].value=" ";
      }
      else if(document.forms["LeftCheck"]["cc_number"].value.match(/^[A-Za-z]+$/)){
        alert(creditError);
        document.forms["LeftCheck"]["cc_number"].value=" ";
      }
      else if(document.forms["LeftCheck"]["cc_number"].value.match(/^[-+]?[0-9]+\.[0-9]+$/)) { 
        alert(creditError);
        document.forms["LeftCheck"]["cc_number"].value=" ";
      }
      else 
        if(document.forms["LeftCheck"]["cc_number"].value.match(/^(?:3[47][0-9]{13})$/)){
          document.getElementsByClassName('amexcard').style.visibility="visable";
          document.forms["LeftCheck"]["cc_number"].value=" ";
          }
        else if(document.forms["LeftCheck"]["cc_number"].value.match(/^(?:4[0-9]{12}(?:[0-9]{3})?)$/)){
          document.getElementsByClassName('visacard').style.visibility="visable";
          document.forms["LeftCheck"]["cc_number"].value=" ";
          }
        else if(document.forms["LeftCheck"]["cc_number"].value.match(/^(?:5[1-5][0-9]{14})$/)){
          document.getElementsByClassName('mastercard').style.visibility="visable";
          document.forms["LeftCheck"]["cc_number"].value=" ";
          }
        else if(document.forms["LeftCheck"]["cc_number"].value;=.match(/^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/)){
          document.getElementsByClassName('discovercard').style.visibility="visable";
          document.forms["LeftCheck"]["cc_number"].value=" "
          }        
        else {
          alert(creditError)
          this.clear()
          }
    }    
  </code></pre>
  
  <p>I would ideal like the text box to validate that when a creditcard number is entered it; it will check nothing outside of numbers were entered, the cadence of the numbers match a card type or reset the field, and display the image that the card is next to the "Payment" header.</p>
  
  <p>The Checksum Validation by Alex works very well, with that portion out of the way I can streamline the image setting. So far my code has been updated to the following</p>
  
  <p>Updated HTML</p>
  
  <pre><code>&lt;form method="POST" action="/checkout" class = "LeftCheck" name="LeftCheck" id="LeftCheck"&gt;
  &lt;h2&gt;Payment
  &lt;img style="visibility: hidden" class="mastercard" 
  src="https://img.icons8.com/color/48/000000/mastercard.png"&gt;
  &lt;img style="visibility: hidden" class="visacard" 
  src="https://img.icons8.com/color/48/000000/visa.png"&gt;
  &lt;img style="visibility: hidden" class="discovercard" 
  src="https://img.icons8.com/color/48/000000/discover.png"&gt;
  &lt;img style="visibility: hidden" class="amexcard" 
  src="https://img.icons8.com/color/48/000000/amex.png"&gt;
  &lt;/h2&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="name-on-card"&gt;Name on Card&lt;/label&gt;
        &lt;input class="cc_name" type="text" name="card-name" class="form-control" placeholder=""&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="cc-number"&gt;Credit card number&lt;/label&gt;
        &lt;input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="16"&gt;
      &lt;/div&gt;
      &lt;div class=""&gt;
        &lt;select class="month_year_select" name="month" id="month"&gt;
          &lt;option value=""&gt;exp month&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class=""&gt;
        &lt;select class="month_year_select" id="year" name="year"&gt;
          &lt;option value=""&gt;exp year&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="CVV"&gt;
        &lt;label for="cc-cvv"&gt;CVV&lt;/label&gt;
        &lt;input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4"&gt;
      &lt;/div&gt;
        &lt;button type="submit" class="myButton"style = "float:right;"&gt;Place Order&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>And the updated Issue area of my JavaScript</p>
  
  <pre><code>document.getElementById('cc_number').addEventListener('change',pictureCheck);
    function pictureCheck()
    {
      var ccNum = this.value;
      if (ccNum.length = 15)
      {
        document.getElementsById('amexcard').style.display='';
      }
      else if(ccNum.value.match(/^(?:4[0-9]{12}(?:[0-9]{3})?)$/))
      {
        document.getElementsById('visacard').style.display='';
      }
      else if(ccNum.value.match(/^(?:5[1-5][0-9]{14})$/))
      {
        document.getElementsById('mastercard').style.display='';
      }
      else (ccNum.value;=.match(/^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/)) 
      {
        document.getElementsById('discovercard').style.display='';
      }
    }
  </code></pre>