JQuery Card - Bootstrap 4 Checkout Form Validation

Demo: http://www.ufukozdemir.website/github/jquery-card-bootstrap4-checkout-form/

Orjinal JQuery Card : https://jessepollak.github.io/card/

Bootstrap Checkout Form: https://getbootstrap.com/docs/4.1/examples/checkout/

---

Özellikler

• Kart tipi algılama (Visa – Mastercard vs)
• Alan doğrulaması (Boşluk – Özel Karakter)
• Giriş maskelemesi
• Numara, isim, tarih ve CVC’ye özel yer alan alanlar

---

Örnek Kart Numarası

Visa: 4111111111111111
Discover: 6011111111111117
MasterCard: 5111111111111118
Maestro: 5018111111111112
JCB: 3511111111111119
American Express: 371111111111114
Diners Club: 38111111111119

Kurulum

Adım 1 (Gerekli dosyaların sayfa içerisine entegre edilmesi)

<!--  HEADER  -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/card/2.4.0/card.css">

<!-- FOOTER -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/card/2.4.0/jquery.card.min.js"></script>

---

Adım 2 (Kartın görüneceği alanı ve ödeme verisi giriş alanlarımızı oluşturalım)

<!-- Kartın Gözükeceği Class -->
<div class="card-wrapper"></div>

<!-- Kart Bilgilerinin Doldurulacağı Form -->
<div class="form-container active">  
    <div class="row">  
        <div class="col-md-6 mb-3">  
            <label for="cc-name">Ad Soyad</label>  
            <input type="text" class="form-control" id="cc-name" placeholder="" maxlength="40" name="name" required>  
            <small class="text-muted">Kredi kartı üzerinde yazılan ad soyad</small>  
            <div class="invalid-feedback">Ad Soyad alanı gerekli.</div>  
        </div>  
        <div class="col-md-6 mb-3">  
            <label for="cc-number">Kredi Kartı Numarası</label>  
            <input type="text" class="form-control" id="cc-number" placeholder="" name="number" required>  
            <div class="invalid-feedback">Kredi Kartı Numarası alanı gerekli.</div>  
        </div>  
    </div>  
    <div class="row">  
        <div class="col-md-3 mb-3">  
            <label for="cc-expiration">Son Kullanım Tarihi</label>  
            <input type="text" class="form-control" id="cc-expiration" placeholder="" name="expiry" required>  
            <small class="text-muted">AA/YY şeklinde</small>  
            <div class="invalid-feedback">Son Kullanım Tarihi alanı gerekli.</div>  
        </div>  
        <div class="col-md-3 mb-3">  
            <label for="cc-cvv">CVV</label>  
            <input type="text" class="form-control" id="cc-cvv" placeholder="" name="cvc" required>  
            <small class="text-muted">Kartın arkasındaki kod</small>  
            <div class="invalid-feedback">CVV alanı gerekli.</div>  
        </div>  
    </div>  
</div>

---

Adım 3 (card.js ve bootstrap validation bilgilerini sayfamıza tanımlayalım)

Lütfen Class bilgilerine dikkat ediniz! Kart formunun çalışmasını istediğiniz Class kendiniz belirleyebilirsiniz. Ben burada ana formuma tanımladım.

// Card Form
$('.needs-validation').card({
    container: '.card-wrapper',
});

// JavaScript Form Validation
(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);
})();