У цьому короткому туторіалі ми покажемо вам, як створити просту форму валідації кредитної картки.
Огляд проекту
Ось те, до чого ми будемо йти в цій статті :
{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');
Далі було б непогано додати зворотній зв'язок в режимі реального часу для користувачів, в той час як вони друкують інформацію в форми. Для цього ми напишемо просту функцію, яка робить дві речі:
- Перевіряє, чи правильну інформацію вводить користувач. Додає відповідне забарвлення в текстове поле.
- Залежно від вхідних даних визначає тип картки: 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;
}
}
Вітаю, форма валідації кредитної карти готова!
Ще немає коментарів