Interactive card details (SASS + JS)

Hello, I have completed this exercise!

By far the most challenging exercise I have came across. Positioning the cards with text on them, making them responsive on mobile by having them overlap, making the validation form for credit card details work was all new to me. It definitely was overwhelming but taking this exercise did teach me a lot. Please let me know if there is a better way to do all these.

I attempted to use the ES6 class constructor for the credit card details, but it didn't prove useful as I need to declare them regardless to use them for addEventListener for validation.

if (isValid["number", "name", "month", "year", "cvc"] === true){
        ui.addDetailsToCard(card)
        ui.clearFields ()
        ui.displayThankYou()
    }

I made this code to check if every field has a valid text, but whenever you type on every field correct and then invalidate of the form, the submit button will still work. Is there a reason why?

Thank you for reading, any feedback is appreciated!