Foundation zurb card validation

by Alexey Zuev

HTML

<link rel="stylesheet" href="//cdn.foundation5.zurb.com/foundation.css">
<script src="//cdn.foundation5.zurb.com/foundation.js"></script>
<form class="card-form row" id="myForm" data-abide>
    <div class="large-3 medium-3 columns">
        <label>Карта</label>
        <input type="text" maxlength="4" size="4" data-abide-ignore>
    </div>
    <div class="large-3 medium-3 columns">
        <label>состоит из</label>
        <input type="text" maxlength="4" size="4" data-abide-ignore>
    </div>
    <div class="large-3 medium-3 columns">
        <label>4</label>
        <input type="text" maxlength="4" size="4" data-abide-ignore>
    </div>
    <div class="large-3 medium-3 columns">
        <label>полей</label>
        <input type="text" maxlength="4" size="4" data-abide-ignore>
    </div>
    <input type="text" id="card" pattern="card" class="visually-hidden">
    <div class="row">
        <div class="large-12 columns">
        <small class="error">Введите правильный номер карты</small>
        </div>
    </div>
</form>

CSS

.card-form {
    position: relative;
}
.visually-hidden {
    visibility: hidden;
    position: absolute;
    height: .01em !important;
    width: .01em !important;
    padding: 0 !important;
}

JavaScript

$(function () {
    $(document).foundation();

    var cards = $('[data-abide-ignore]'),
        resultCard = $('#card');

    cards.on('input', function () {
        var resultText = '';

        cards.each(function () {
            resultText += $(this).val();
        });

        resultCard.val(resultText);
        resultCard.trigger('change');

        // перебежка между инпутами

        var self = $(this),
            currIndex;

        if (self.val().length == 4) {
            currIndex = cards.index(self);

            if (currIndex < cards.length - 1) {
                cards[currIndex + 1].focus();
            }
        }
    });
});