Добавление проверки кредитной карты в мою форму оплаты

Question

В настоящее время я использую Bootstrap 4 и проверку по умолчанию.Я хочу добавить к этому валидацию алгоритма Луна, чтобы он мог правильно проверить предоставленный номер карты.У меня есть следующая функция, однако я не уверен, как реализовать проверку с помощью Bootstraps

Функция:

/**
 * Luhn Test
 * https://gist.github.com/ShirtlessKirk/2134376
 */
var luhnChk = (function(arr) {
  return function(ccNum) {
    var
      len = ccNum.length,
      bit = 1,
      sum = 0,
      val;

    while (len) {
      val = parseInt(ccNum.charAt(--len), 10);
      sum += (bit ^= 1) ? arr[val] : val;
    }

    return sum && sum % 10 === 0;
  };
}([0, 2, 4, 6, 8, 1, 3, 5, 7, 9]));

function is_luhn_valid(cardNumber) {
  if (luhnChk(cardNumber) === true) {
      alert("Valid")
  } else {
      alert("Invalid")
  }
}

        var creditCardNumber = $('input[name="cardno1"]').val().replace(/\s+/g, '');

        is_luhn_valid(creditCardNumber);

Документация по проверке Bootstrap:

https://getbootstrap.com/docs/4.0/components/forms/#validation

JavaScript дляих валидация:

(function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();

Answer 1

Добро пожаловать в сообщество.

Проверка номера кредитной карты с использованием алгоритма Луна не должна зависеть от используемой вами структуры CSS.

Я написал решение с комментариями о том, как вы можете легко реализовать проверку, используя предоставленную вами примерную функцию. Все, что вам действительно нужно, это кнопка для обработки события click и для изменения положения переменной creditCardNumber в этом блоке обработчика событий.

  var luhnChk = (function(arr) {
        return function(ccNum) {
            var
                len = ccNum.length,
                bit = 1,
                sum = 0,
                val;

            while (len) {
                val = parseInt(ccNum.charAt(--len), 10);
                sum += (bit ^= 1) ? arr[val] : val;
            }

            return sum && sum % 10 === 0;
        };
    }([0, 2, 4, 6, 8, 1, 3, 5, 7, 9]));

    function is_luhn_valid(cardNumber) {
        if (luhnChk(cardNumber) === true) {
            alert("Valid")
        } else {
            alert("Invalid")
        }
    }
    
    // This creates an event handler for the submit button in your HTML code
    $('#submitBtn').on('click', function(){
        
        // Once the user has entered their credit card number and clicked on the button...
        // the 'creditCardNumber' will fetch the the details from the input
        var creditCardNumber = $('input[name="cardno1"]').val().replace(/\s+/g, '');
        
        // It will then send the input to the 'is_luhn_valid' method to perform the actual validation
        is_luhn_valid(creditCardNumber);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="cardno1">
<button id="submitBtn">Check validity</button>