Как с помощью foundation abide проверять склеенные в один 4 инпута ввода номера карты?

Question

[Думай Головой]

Всем привет!

Проект построен на foundation, для валидации полей форм более чем достаточно foundation.abide.js.
У него есть паттерн валидации "card": visa, amex, mastercard.
Но загвоздка в том, что в проекте поле ввода номера карты состоит не из одного, а из 4-х инпутов (дизайнеру надо руки оторвать), а данный скрипт работает только с одним полем (да и многие другие скрипты валидации)

Как быть? Сторонние либы ради одного поля подключать думаю не стоит, т.к. сам foundation уже много занимает места и всех его возможностей хватает

Ранее задавал вопрос про склейку инпутов:
https://toster.ru/q/231089
т.е. с этим моментом мне всё понятно

Answer 1

[Данил Чекалин]

Наверное дизайнер по мимо прочего еще и подразумевал, что в каждом input будет по 4 цифры? Если так, то возникает проблема другая. Есть карты у Visa (вроде бы), где более 16 цифр.

Самое тупое, что можно придумать, чтоб не модифицировать ни чего, это сделать 4 input поверху одного input.
Данные которые вводятся в 4 input собирать и вносить в тот input.
joxi.ru/jnAyDnRU9YVO2Z

Answer 2

[Алексей Зуев]

Покопавшись в исходниках foundation abide, нашел следующее:
валидация вешается примерно так

.find('input, textarea, select').not(":hidden, [data-abide-ignore]")
  .off('.abide')
  .on('blur.fndtn.abide change.fndtn.abide', function (e) {
  ...
  .on('keydown.fndtn.abide', function (e) {
  ....

это нам говорит о том, что в эту валидацию не входят скрытые поля и поля с атрибутом data-abide-ignore.
Исходя из этого можно попробовать придумать что-то такое