Q:

How to responsively get Javascript to validate information from HTML5 form textboxes? 

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.  
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. 
HTML
<h2>Payment
<img style="visibility: hidden" class="mastercard" 
src="https://img.icons8.com/color/48/000000/mastercard.png">
<img style="visibility: hidden" class="visacard" 
src="https://img.icons8.com/color/48/000000/visa.png">
<img style="visibility: hidden" class="discovercard" 
src="https://img.icons8.com/color/48/000000/discover.png">
<img style="visibility: hidden" class="amexcard" 
src="https://img.icons8.com/color/48/000000/amex.png">
</h2>
    <div class="form-group">
      <label for="name-on-card">Name on Card</label>
      <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
    </div>
    <div class="form-group">
      <label for="cc-number">Credit card number</label>
      <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="16">
    </div>
    <div class="">
      <select class="month_year_select" name="month" id="month">
        <option value="">exp month</option>
      </select>
    </div>
    <div class="">
      <select class="month_year_select" id="year" name="year">
        <option value="">exp year</option>
      </select>
    </div>
    <div class="CVV">
      <label for="cc-cvv">CVV</label>
      <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
    </div>
      <button type="submit" class="myButton"style = "float:right;">Place Order</button>
  </form>  

JavaScript
<script type="text/javascript">
  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 < 3 ||document.forms["LeftCheck"]["cc-cvv"].value.length>=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 < 15 ||document.forms["LeftCheck"]["cc_number"].value.length>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()
        }
  }    

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. 
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
Updated HTML
<form method="POST" action="/checkout" class = "LeftCheck" name="LeftCheck" id="LeftCheck">
<h2>Payment
<img style="visibility: hidden" class="mastercard" 
src="https://img.icons8.com/color/48/000000/mastercard.png">
<img style="visibility: hidden" class="visacard" 
src="https://img.icons8.com/color/48/000000/visa.png">
<img style="visibility: hidden" class="discovercard" 
src="https://img.icons8.com/color/48/000000/discover.png">
<img style="visibility: hidden" class="amexcard" 
src="https://img.icons8.com/color/48/000000/amex.png">
</h2>
    <div class="form-group">
      <label for="name-on-card">Name on Card</label>
      <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
    </div>
    <div class="form-group">
      <label for="cc-number">Credit card number</label>
      <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="16">
    </div>
    <div class="">
      <select class="month_year_select" name="month" id="month">
        <option value="">exp month</option>
      </select>
    </div>
    <div class="">
      <select class="month_year_select" id="year" name="year">
        <option value="">exp year</option>
      </select>
    </div>
    <div class="CVV">
      <label for="cc-cvv">CVV</label>
      <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
    </div>
      <button type="submit" class="myButton"style = "float:right;">Place Order</button>
  </form>

And the updated Issue area of my JavaScript
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='';
    }
  }

A:

Your javascript part is all wrong.  Let me show how it should work. 

document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way
document.getElementById('cc_number').onchange = creditCheck; //it is OK too

function CWcheck() { //function name should conventionally start with lower case but isn't big deal
  //"this" is the element which fired the event
  if (! /^\d{3,4}$/.test(this.value)) {
    this.value = '';
    this.focus();
    alert('CVV is 3 or 4 digits');
  }
}

function creditCheck() {
  // hide cc logos
  var ccImgs = document.querySelectorAll('h2 img');
  for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) {
    ccImg.style.visibility = 'hidden';
  }
  var ccNum = this.value.replace(/\D/g, ''); //remove all non-digits
  if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) {
    alert('CC number is 15 or 16 digits');
    this.focus();
    return false;
  }
  //implement Luhn algorithm
  var check = ccNum.split('') //get array
    .reverse()
    .map(function(el, index) {
      return el * (index % 2 + 1); //multiply even positions by 2
    })
    .join('') //combine array of strings
    .split('')
    .reduce(function(a, b) { //sum digits
      return a + (b - 0);
    }, 0);
  if (! check || (check % 10)) { //checksum should be none-zero and dividable by 10
    alert('Incorrect checksum of CC');
    this.focus();
    return false;
  }
  //test passed.  show card logo
  if (/^5[1-5]/.test(ccNum))
    document.querySelector('h2 img.mastercard').style.visibility = 'visible';
  else if (/^4/.test(ccNum))
    document.querySelector('h2 img.visacard').style.visibility = 'visible';
  else if (ccNum.length == 15 && /^3[47]/.test(ccNum))
    document.querySelector('h2 img.amexcard').style.visibility = 'visible';
  else if (/^6011/.test(ccNum))
    document.querySelector('h2 img.discovercasd').style.visibility = 'visible';
  //and so on
  else {
    alert('CC number doesn\'t match known any CC issuer');
    this.focus();
    return false;
  }

  //test passed.  format the string
  this.value = ccNum
    .replace(/^(\d{4})(\d{4})(\d{4})(\d+)$/, '$1 $2 $3 $4');
}
<h2>Payment
  <img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png">
  <img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png">
  <img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png">
  <img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png">
</h2>
<div class="form-group">
  <label for="name-on-card">Name on Card</label>
  <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
</div>
<div class="form-group">
  <label for="cc-number">Credit card number</label>
  <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20">
</div>
<! --<div class="">
  <select class="month_year_select" name="month" id="month">
    <option value="">exp month</option>
  </select>
</div>
<div class="">
  <select class="month_year_select" id="year" name="year">
    <option value="">exp year</option>
  </select>
</div>-->
<div class="CVV">
  <label for="cc-cvv">CVV</label>
  <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
</div>

UPDATE: CC issuer from card number is added.