Помогите реализовать валидацию поля

[TomWalbridge]

Привет всем! Мне надо разделить номер карты в форме оплаты по 4 цифры и добавить иконку банка при вводе первой цифры в инпут, написал что то похожее на правду, только не работе, подскажите кто чем сможет!

import { el, setChildren, setAttr, mount } from 'redom'
export function renderTable() {
    const h1 = el('h1', 'Payment information')
    const container = el('div')
    const content = el('div')
    const form = el('form')
    const div1 = el('div')
    const div2 = el('div')
    const div3 = el('div')
    const div4 = el('div')
    const div5 = el('div')
    const labelNumCard = el('Label')
    const labelCVC = el('Label')
    const labelDate = el('Label')
    const labelEmail = el('Label')
    const inputCardNumber = el('input')
    const inputCVC = el('input')
    const inputDate = el('input')
    const inputEmail = el('input')
    const button = el('button')

    labelCVC.textContent = 'CVC'
    labelNumCard.textContent = 'Номер карты'
    labelDate.textContent = 'Срок действия карты'
    labelEmail.textContent = 'Email'


    button.textContent = 'Оплатить'


    inputCardNumber.placeholder = "XXXX XXXX XXXX XXXX"
    inputCardNumber.pattern = "[0-9]{4}\s[0-9]{4}\s[0-9]{4}\s[0-9]{4}"
    form.name = 'myform'
    form.id = 'form'
    inputCardNumber.name = 'cardcode'
    inputDate.id = 'date'
    inputDate.type = 'date'


 setAttr(h1, {
        style: { color: 'blue' }
    })

    setAttr(
        form, {
            className: 'myform'
        },
    )
    setAttr(
        inputCardNumber, {
            className: 'cardCode',
            id: 'cardCode'
        },
    )
    setAttr(
        container, {
            className: 'container'
        },
    )
    setAttr(
        div5, {
            className: 'svgIcon'
        },
    )
    setAttr(content, {
        className: 'content'
    })


    mount(window.document.body, container)
    div1.append(inputCardNumber, labelNumCard)
    div2.append(inputCVC, labelCVC)
    div3.append(inputDate, labelDate)
    div4.append(inputEmail, labelEmail)
    form.append(div1, div2, div3, div4, button, div5)
    content.append(form)
    content.prepend(h1)
    container.append(content)

    return {
        form,
        inputCardNumber,
        inputDate,
        inputCVC
    }
}

import { renderTable } from './renderTable'
import { svgMasterCard, svgUnionPay, svgVisa } from './svg'
import JustValidatePluginDate from 'just-validate';

function cardValidCode() {
    var inputCardNumber = this.value.replace(/[^\d]/g, '').substring(0, 16);
    inputCardNumber = inputCardNumber != '' ? inputCardNumber.match(/.{1,4}/g).join(' ') : '';
    this.value = inputCardNumber;
    myform.number.value = this.value.split(" ").join("");
}
for (var i in ['input', 'change', 'blur', 'keyup']) {
    window.inputCardNumber.addEventListener('input', cardValidCode, false);
}
window.inputCardNumber.addEventListener('keyup', () => {
    if (inputCardNumber.value[0] == '3' && inputCardNumber.value != '') {
        div5.innerHTML = svgVisa
        console.log('gggg')
    }
})
renderTable()