Как быстро заставить Javascript проверять информацию из текстовых полей формы HTML5?

Я пытаюсь создать функциональный сценарий проверки кредитной карты для демонстрационного задания. Я пытаюсь заставить JavaScript реагировать на ввод, когда фокус() меняется с текстового поля на текстовое поле. Как только у меня появится реактивный JavaScript, я хочу проверить эти данные по определенным параметрам.

Я пытался добавить методы onchange непосредственно в HTML5, но что-то не работает. Я открыт для всех предложений, я слишком долго стоял в тупике.

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()
        }
  }    

Я бы хотел, чтобы текстовое поле подтверждало это при вводе номера кредитной карты; он не будет проверять ничего, кроме чисел, которые были введены, каденция чисел соответствует типу карты или сбрасывает поле, а также отображает изображение карты рядом с заголовком «Платеж».

Проверка контрольной суммы Алекса работает очень хорошо, и с этой частью я могу упростить настройку изображения. До сих пор мой код был обновлен до следующего

Обновлен 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>

И обновленная область проблем моего 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='';
    }
  }