Створюємо форму валідації кредитної картки

14 хв. читання

У цьому короткому туторіалі ми покажемо вам, як створити просту форму валідації кредитної картки.

Огляд проекту

Ось те, до чого ми будемо йти в цій статті :

Створюємо форму валідації кредитної картки {full-post-img}

ЗАВАНТАЖИТИ

Ви можете отримати повний код для цього проекту, натиснувши кнопку Завантажити у верхній частині цієї статті. Огляд файлів можна побачити нижче:

Створюємо форму валідації кредитної картки {full-post-img}

Є два .css файли і два .js файли, які нам потрібно буде включити в наш HTML. Всі інші ресурси, такі як Bootstrap, JQuery і веб-шрифти будуть включені ззовні за допомогою CDN.

index.html

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Credit Card Validation Demo</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet" type="text/css">
    <link href="assets/css/demo.css" rel="stylesheet" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script charset="utf-8" src="assets/js/jquery.payform.min.js"></script>
    <script src="assets/js/script.js"></script>

Тепер, коли все налаштоване, ми можемо почати будувати свою форму кредитної картки. Давайте почнемо з макета HTML!


Налаштування

Вигляд кредитної картки повинен бути простим. Ось чотири поля, які повинна мати кожна форма кредитної картки:

  • Ім'я власника карти
  • Номер карти
  • Секретний код (також відомий як CVV/CVC/CID)
  • Дата закінчення терміну дії

Все, що нам потрібно зробити, це створити і додати всі необхідні поля введення. Для полів власника, номер карти, і CVV ми будемо використовувати прості текстові поля. Для терміну придатності ми помістимо комбінацію з двох селекторів із заздалегідь визначеними параметрами.

Крім того, наша форма буде мати заголовок, кнопки, і зображення популярних постачальників кредитних карт. Так як ми працюємо з Bootstrap є трохи додаткової розмітки, але це допомагає зберегти код організованим і розташування адаптивним.

<div class="creditCardForm">
    <div class="heading">
        <h1>Confirm Purchase</h1>
    </div>
    <div class="payment">
        <form>
            <div class="form-group owner">
                <label for="owner">Owner</label>
                <input class="form-control" id="owner" type="text">
            </div>
            <div class="form-group CVV">
                <label for="cvv">CVV</label>
                <input class="form-control" id="cvv" type="text">
            </div>
            <div class="form-group">
                <label for="cardNumber">Card Number</label>
                <input class="form-control" id="cardNumber" type="text">
            </div>
            <div class="form-group">
                <label>Expiration Date</label>
                <select>
                    <option value="01">January</option>
                    <option value="02">February </option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <select>
                    <option value="16"> 2016</option>
                    <option value="17"> 2017</option>
                    <option value="18"> 2018</option>
                    <option value="19"> 2019</option>
                    <option value="20"> 2020</option>
                    <option value="21"> 2021</option>
                </select>
            </div>
            <div class="form-group">
                <img src="assets/images/visa.jpg">
                <img src="assets/images/mastercard.jpg">
                <img src="assets/images/amex.jpg">
            </div>
            <div class="form-group">
                <button class="btn btn-default" id="confirm-purchase" type="submit">Confirm</button>
            </div>
        </form>
    </div>
</div>

Тепер, коли ми маємо необхідні поля введення, ми можемо налаштувати правила перевірки.


Валідація

Всі перевірки ми покажемо на стороні клієнта і створені вони виключно за допомогою JavaScript. Якщо ви зацікавлені в тому, щоб створити форму валідації за допомогою HTML ви можете прочитати цю статтю.

Почнемо з того, що ми визначемо всі селектори JQuery, які нам знадобляться:

var owner = $('#owner'),
    cardNumber = $('#cardNumber'),
    cardNumberField = $('#card-number-field'),
    CVV = $("#cvv"),
    mastercard = $("#mastercard"),
    confirmButton = $('#confirm-purchase'),
    visa = $("#visa"),
    amex = $("#amex");

Потім, використовуючи Payform.js, ми перетворимо наші основні поля введення в спеціалізовані для введення даних кредитної картки. Нам просто потрібно правильної назвати функції і бібліотека буде автоматично обробляти форматування тексту і максимальну довжину рядка для нас:

cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');

Далі було б непогано додати зворотній зв'язок в режимі реального часу для користувачів, в той час як вони друкують інформацію в форми. Для цього ми напишемо просту функцію, яка робить дві речі:

  1. Перевіряє, чи правильну інформацію вводить користувач. Додає відповідне забарвлення в текстове поле.
  2. Залежно від вхідних даних визначає тип картки: Visa, MasterCard чи American Express. Це робиться за допомогою методу payform.paarseCardType().

Оскільки ми хочемо виконувати вищевказані дій кожного разу, коли новий користувач набирає, ми будемо використовувати обробник подій JQuery KeyUp().

cardNumber.keyup(function() {
    amex.removeClass('transparent');
    visa.removeClass('transparent');
    mastercard.removeClass('transparent');

    if ($.payform.validateCardNumber(cardNumber.val()) == false) {
        cardNumberField.removeClass('has-success');
        cardNumberField.addClass('has-error');
    } else {
        cardNumberField.removeClass('has-error');
        cardNumberField.addClass('has-success');
    }

    if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
        mastercard.addClass('transparent');
        amex.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
        mastercard.addClass('transparent');
        visa.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
        amex.addClass('transparent');
        visa.addClass('transparent');
    }
});

Існує ще одна річ, яку ми повинні робити, і це перевірити, чи всі поля отримали достовірні дані, коли користувач намагається відправити форму.

Перевірка Імені може бути досить непростою. Щоб не ускладнювати цю статтю, ми не будемо досить глибоко розбирати цю тему, а просто будемо перевіряти, щоб в полі імені було не менше п'яти символів. Payform надає нам необхідні методи для перевірки решти форми.

confirmButton.click(function(e) {
    e.preventDefault();

    var isCardValid = $.payform.validateCardNumber(cardNumber.val());
    var isCvvValid = $.payform.validateCardCVC(CVV.val());

    if(owner.val().length < 5){
        alert("Wrong owner name");
    } else if (!isCardValid) {
        alert("Wrong card number");
    } else if (!isCvvValid) {
        alert("Wrong CVV");
    } else {
        // Everything is correct. Add your form submission code here.
        alert("Everything is correct");
    }
});

Перевірки, вказані вище, створені тільки для освітніх цілей і не повинні використовуватися в комерційних проектах. Завжди додавайте перевірки, як на стороні клієнта, так і на стороні сервера, особливо при роботі з даними кредитних карт.


Стилі

Ми використовуємо Bootstrap, тому більша частина стилізування здійснюється в рамках. Наш CSS в основному покриває розмір полів введення і різних відступів, маржинальних і шрифтових налаштувань.

styles.css

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: 100px auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm .CVV {
    width: 35%;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 49%;
}
.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}

Вітаю, форма валідації кредитної карти готова!

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.8K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація