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

Question

Я пытаюсь создать функциональный сценарий проверки кредитной карты для демонстрационного задания. Я пытаюсь заставить JavaScript реагировать на ввод, когда focus () меняется с текстового поля на текстовое поле. Как только у меня будет реактивный 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='';
    }
  }

Answer 1

Ваша часть JavaScript полностью неверна. Позвольте мне показать, как это должно работать.

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>

ОБНОВЛЕНИЕ: Добавлен код эмитента с номера карты.

Answer 2

Я заметил, что вы используете document.forms["LeftCheck"]["cc-cvv"] для доступа к полям формы.Поскольку вы не включили свой начальный тег формы, я хочу убедиться, что в поле name вашей формы установлено значение LeftCheck, а не ID, поскольку у меня раньше была эта проблема.

Вы также используете document.getElementbyID() для доступа к элементам, к которым вы применяете прослушиватель onchange.Метод на самом деле document.getElementbyId(), последняя буква не заглавная.Это может быть причиной того, что ваши события не запускаются.

Способ, которым вы прикрепляете свои события к элементу выбора, также неверен.Вы можете просто сделать это:

document.getElementbyID("cc-cvv").onchange = CWcheck;

или, альтернативно,

document.getElementbyID("cc-cvv").onchange = function() { CWcheck();};

И последнее: вы используете регулярное выражение для проверки ввода поля кредитной карты.Однако вы делаете это, проверяя, соответствует ли ввод недопустимому шаблону, и выдает ошибку, если это так.Хотя это может сработать, было бы гораздо лучше проверить, соответствует ли ввод действительному шаблону, а если нет, вызвать ошибку.Это делает ваш код проверки более надежным и гарантирует, что у вас нет недопустимых пограничных случаев, которые могут пройти проверку.

Answer 3

Использовать встроенное событие onblur

<input type="text" onblur="CWcheck()" />

Answer 4

Вы можете сделать это с JQuery.Когда вы переключаетесь между полями ввода, вы можете запустить скрипт проверки.

$("#id1, #id2").focus(function() {
  alert("Focus changed.");
  //run validator
});