button will disable until all the input is not filluped is not working properly

enter image description here

Here above is my form input filled. I create a script if input filled is fillup then button will enabled until button is disabled.

But on Card Number input box it is not effected with other input. without card number button shows enabled but i want it must be disabled if all filled is not fillup..

Here is my jQuery script:

jQuery(document).on('change keyup', '.required', function(e){
           let Disabled = true;
            jQuery(".required").each(function() {
              let values = this.value;

              if ((values)&&(values.trim() !=''))
                  {
                    Disabled = false;
                  }else{
                    Disabled = true;
                    return false;
                  }
            });
            
    
           if(Disabled){
                jQuery('#submit_button').prop("disabled", true);
              }else{
                jQuery('#submit_button').prop("disabled", false);
              }
         });

These card number input field is come from stripe payment api.

<div id="card-element" class="inputText gdcard">
         <!-- a Stripe Element will be inserted here. -->
</div>

I can’t use stripe card element input field with my .required class. Please sort me out this bug?

Answer

The recommended way to manage this is to listen to events on Stripe Elements. In particular, you could listen to the change event on a card element (doc) and inspect the value of event.complete to see if the form is filled out. If it is (and your other fields are too) you can enable the Pay button.

function checkIfCardComplete(elementsEvent) {
  if (elementsEvent.complete) {
    $("#pay-now").removeAttr("disabled")
  } else {
    $("#pay-now").attr("disabled", "disabled")
  }
}

card.on('change', function(event) {
  checkIfCardComplete(event);
});

You can see an example implementation of this here (which only looks at the card input being complete, it ignore the other fields): https://jsfiddle.net/nolanhawkins/dhjybsnr/3/

edit: If, for example, you refactored your code to make the check on your custom fields a function:

function areAllMyFieldsValid() {
  let Disabled = true;
  jQuery(".required").each(function() {
    let values = this.value;

    if ((values)&&(values.trim() !='')) {
     Disabled = false;
    } else {
      Disabled = true;
      return false;
    }
  });
  return !Disabled; // really you should invert your logic, not the result
}

then you could change the check in the event handler to just look at this additionally:

if (elementsEvent.complete && areAllMyFieldsValid()) { ...}