Stripe js: don't let empty form be sent.

Hi everybody, I'm trying to avoid letting users submit stripe form when inputs are empty, I`m using stripe.js elements integration to render my form and handle form submition inside my vue component.

this.cardNumberElement.on('change', this.enableForm);
this.cardExpiryElement.on('change', this.enableForm);
this.cardCvcElement.on('change', this.enableForm);

After checking the docs I tried to use the change event on inputs but this is not working sice the user can just not type anything and click submit button.

This is my component:

mounted()
{
    console.log(this.$options.name + ' component succesfully mounted');

    this.stripe = Stripe(this.stripePK);
    this.elements = this.stripe.elements();

    this.cardNumberElement = this.elements.create('cardNumber', {style: this.stripeStyles});
    this.cardNumberElement.mount('#card-number-element');
    this.cardExpiryElement = this.elements.create('cardExpiry', {style: this.stripeStyles});
    this.cardExpiryElement.mount('#card-expiry-element');
    this.cardCvcElement = this.elements.create('cardCvc', {style: this.stripeStyles});
    this.cardCvcElement.mount('#card-cvc-element');

    let stripeElements = document.querySelectorAll("#card-number-element, #card-expiry-element, #card-cvc-element");
    stripeElements.forEach(el => el.addEventListener('change', this.printStripeFormErrors));
    this.cardNumberElement.on('change', this.enableForm);
    this.cardExpiryElement.on('change', this.enableForm);
    this.cardCvcElement.on('change', this.enableForm);
},

methods: 
{
    ...mapActions('Stripe', ['addSource', 'createSourceAndCustomer']),
    ...mapMutations('Stripe', ['TOGGLE_PAYMENT_FORM']),
    ...mapMutations('Loader', ['SET_LOADER', 'SET_LOADER_ID']),

    enableForm:function(event){
        if(event.complete){
            this.disabled = false;
        }
        else if(event.empty){
            this.disabled = true;
        }
    },


    submitStripeForm: function()
    {
        this.SET_LOADER({ status:1, message: 'Procesando...' });
        var self = this;

        this.stripe.createSource(this.cardNumberElement).then(function(result) {
            if (result.error) {
                self.cardErrors = result.error.message;
            }
            else {
                self.stripeSourceHandler(result.source.id);
            }
        });   
    },


    stripeSourceHandler: function(sourceId)
    {
        console.log('stripeSourceHandler');
        
        this.cardNumberElement.clear();
        this.cardExpiryElement.clear();
        this.cardCvcElement.clear();

        if(this.customerSources.length == 0)
        {
            console.log('createSourceAndCustomer');
            this.createSourceAndCustomer({ id: sourceId });
        }
        else
        {
            console.log('addSource');
            this.addSource({ id: sourceId });
        }
    },


    printStripeFormErrors: function(event)
    {
        if(event.error)
        {
            self.cardErrors = event.error.message
        } 
        else
        {
            self.cardErrors = '';
        }
    }  
}