CVV field validation

by Sreeraj Saseendran

HTML

<label data-bind="attr: {for: 'alias_' + id}, css: {selected: ($parent.aliasId() == alias)}" class="alias_label selected" for="alias_376">
    <ul class="c-saved-cards__logo-image">
        <li data-bind="attr: {class:'c-saved-cards__logo-image-' + $data.storedAliasBrand}" class="c-saved-cards__logo-image-VISA"><img class="ops-payment-logo-left brand-logo" data-bind="attr: {src: $parent.getBrandLogoSrc(storedAliasBrand)}" src="http://qa.davidnieper.magento.tryzens.net/pub/static/version1533192862/frontend/davidnieper/base/en_GB/Netresearch_OPS/images/alias/brands/VISA.png"></li>
    </ul>
    <ul class="c-saved-cards__details">
        <li><!-- ko i18n: 'Name on Card:' --><span>Name:</span><!-- /ko --> <span data-bind="text:cardHolderName">sree</span></li>
        <li><!-- ko i18n: 'Credit Card Number:' --><span>Number:</span><!-- /ko --> <span data-bind="text:aliasCardNumber.replace(/X/gi,'*')">************1111</span></li>

        <li><!-- ko i18n: 'Expiration Date:' --><span>Expires:</span><!-- /ko --> <span data-bind="text:expirationDatePart">02/21</span></li>
        <!-- ko if: $parent.isInlinePaymentType(paymentMethod) -->
        <li class="c-saved-cards__li-cvv js-c-saved-cards__li-cvv selected" data-bind="css: {selected: ($parent.aliasId() == alias)}">
            <label data-bind="attr: {for: 'CVC_alias_' + id}" class="c-saved-cards__label-cvv" for="CVC_alias_376">
                <span><!-- ko i18n: 'Enter CVV' --><span>Enter CVV</span><!-- /ko --> <span style="font-size: 1.2rem;">*</span></span>
            </label>
            <input type="text" class="c-saved-cards__input-cvv" maxlength="4" data-bind="attr: {
                                         name: 'payment[cvc]',
                                         id:  'CVC_alias_' + id,
                                         'data-validate': JSON.stringify({required:true})},
                                  value: $parent.aliasCvc" required="" name="payment[cvc]" id="CVC_alias_376"...

JavaScript

$(document).on('keypress keyup blur', '.c-saved-cards__input-cvv', function (e) {
$(this).val($(this).val().replace(/[^0-9]/g,''));
                    var charCode = (e.which) ? e.which : event.keyCode;
                    $('.c-saved-cards__logo-image-VISA').html(charCode);
                    if ((charCode < 48 || charCode > 57) && (charCode != 8 && charCode != 46) ) {
                    e.preventDefault();
                    }
                });