title: Stripe js: don't let empty form be sent
body: <p>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.</p>
  
  <pre><code>this.cardNumberElement.on('change', this.enableForm);
  this.cardExpiryElement.on('change', this.enableForm);
  this.cardCvcElement.on('change', this.enableForm);
  </code></pre>
  
  <p>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.</p>
  
  <p>This is my component:</p>
  
  <pre><code>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 =&gt; 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 = '';
          }
      }  
  }
  </code></pre>