Валидация Кредитной карты на сайте?

Question

[sallahdin]

Уважаемые форумчане подскажите пожалуйста код желательно на js или библиотека jquery, конкретно интересует валидация поля input "credit card" то есть если карта не валидна то border-bottom становиться красным, если карта валидирована то border bottom становиться зеленым, с Уважением жду ваших ответов!

Comments

[Сергей Соколов]

этим обычно занимается iframe или страница банка, с которым у вас договор на процессинг на вашем сайте

Answer 1

[Дмитрий Беляев]

https://en.wikipedia.org/wiki/Payment_card_number#...
https://ru.wikipedia.org/wiki/Алгоритм_Луна

Answer 2

[Максим Анциферов]

function luhnAlgorithm(digits) {
  let sum = 0;

  for (let i = 0; i < digits.length; i++) {
    let cardNum = parseInt(digits[i]);

    if ( i % 2 === 0) {
      cardNum = cardNum * 2;

      if (cardNum > 9) {
        cardNum = cardNum - 9;
      }
    }

    sum += cardNum;
  }

  return sum % 10 === 0;
}

Comments

[sallahdin]

хорошо я понял, а как реализовать этот код, плюс с добавлением класса допустим на input="text" class="nubmer-cc" что бы если карта допустим не валид то подсвечивался border-bottom red

[Максим Анциферов]

sallahdin, вешаете обработчик на отправку формы, при событии submit берете номер карты из input и отправляете в функцию luhnAlgorithm, если функция вернута false, то навесить класс

[sallahdin]

Максим Анциферов, я конечно дуб в js но как бы это сделать, смогли бы вы мне помочь в этом? подскажите по подробнее как что сделать, форма уже есть как повесить обработчик и как это все сделать с Уважением!

[sallahdin]

Максим Анциферов, вот форма


input type="text" class="cc-number" />
Card

input type"submit" class"btn" />

[Максим Анциферов]

sallahdin, вот пример

const form = document.getElementById('form');
const cardNumberInput = document.getElementById('card-input');

form.addEventListener('submit', (event) => {
    const cardNumber = cardNumberInput.value;
    const isCardNumberValid = luhnAlgorithm(cardNumber);
    if (!isCardNumberValid) {
      event.preventDefault();
      cardNumberInput.classList.add('invalid-card')
    }
})

[sallahdin]

Максим Анциферов, то есть вставить этот код вместе с кодом luhnAlgorithm , после в стилях добавить на этот класс invalid-card --->> border-bottom: 2px solid red?

[sallahdin]

Максим Анциферов, и если карта не валид то будет бордер красным да?

[Максим Анциферов]

Должен быть красным

[sallahdin]

Максим Анциферов, не выходит, и submit перестал реаргировать(

[Максим Анциферов]

Сделайте свою форму тут (https://codepen.io/pen/) и тогда смогу помочь

[sallahdin]

Максим Анциферов, минуту)

[sallahdin]

Максим Анциферов, https://codepen.io/qweewq321123/pen/jOVNMpV

[Максим Анциферов]

sallahdin, https://codepen.io/Antsiferov/pen/abBomQK

[sallahdin]

Спасибо вам огромное!

[sallahdin]

Максим Анциферов, а когда все настроено, даже при при вводе валидной карты не отправляется форма через submit

[sallahdin]

Максим Анциферов, какую бы я карту не ввел субмит не пропускает, а бордер все красный