按钮将禁用，直到所有输入未被填充无法正常工作

Question

以上是我填写的表单输入。我创建一个脚本，如果输入填充是 fillup，那么按钮将启用，直到按钮被禁用。

但在卡号输入框中不受其他输入的影响。没有卡号按钮显示已启用，但我希望如果所有填充都未填充，则必须将其禁用..

这是我的 jQuery 脚本：

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);
              }
         });

这些卡号输入字段来自条纹支付api。

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

我无法在 .required class 中使用条纹卡元素输入字段。请帮我解决这个错误？

Answer 1

你可以试试这个：

$("#card-element").prop(disabled, true);
jQuery(document).on('change keyup', '.required', function(e) {
  //uncomment if this item has required class
  //($("#card-element").removeClass(".required"); 
  var isItOk = jQuery(".required").toArray().every((e) => $(e).val().trim() != '');
  $("#card-element").prop(disabled, isItOk);
  isItOk = isItOk && $("#card-element").val().trim() != '';

  jQuery('#submit_button').prop("disabled", isItOk);
});

jQuery(".required").toArray().every((e) => $(e).val().trim() ！ = ''); 表示所有具有 class .required 的项目都不为空

Answer 2

推荐的管理方法是 listen to events on Stripe Elements. In particular, you could listen to the change event on a card element (doc) 并检查 event.complete 的值以查看表单是否已填写。如果是（您的其他字段也是），您可以启用支付按钮。

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

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

您可以在此处查看此示例的实现（仅查看完整的卡片输入，忽略其他字段）：https://jsfiddle.net/nolanhawkins/dhjybsnr/3/

编辑： 例如，如果您重构了代码以使对自定义字段的检查成为一个函数：

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
}

那么您可以更改事件处理程序中的检查，以便另外查看：

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

按钮将禁用，直到所有输入未被填充无法正常工作

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

php

jquery

button

stripe-payments