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

Posted 2023-03-21

【中文标题】按钮将禁用，直到所有输入未被填满 无法正常工作

【英文标题】：button will disable until all the input is not filluped is not working properly

【发布时间】：2021-06-06 06:45:30

【问题描述】：

上面是我填写的表单输入。如果输入填充为填充，我创建一个脚本，然后按钮将启用，直到按钮被禁用。

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

这是我的 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 类不能使用条纹卡元素输入字段。请帮我解决这个错误？

【问题讨论】：

您希望在需要所有输入之前禁用他的支付按钮，并且您希望在需要所有其他输入之前禁用卡号？

并且不需要#card-number？

card 元素来自条纹支付js库。

【参考方案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() != ''); 表示所有项目.required 的类不为空

【讨论】：

我试过了，但没有成功。如果我的所有字段都已填满，它将显示禁用按钮。

【参考方案2】：

推荐的管理方法是在 Stripe Elements 上listen to events。特别是，您可以在卡片元素 (doc) 上监听 change 事件并检查 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())  ...

【讨论】：

谢谢亲爱的@Nolan H，问题已解决

非常欢迎！如果我的答案（或任何其他）为您解决了问题，请考虑接受带有复选标记的答案:)

亲爱的@Nolan H 这些问题已解决，但当我填写卡片数据按钮将自动启用但我的其他输入字段未填写我想要当所有字段都填满时按钮将启用

然后您应该跟踪自己的表单字段的完成状态，并在卡片change 事件中与event.complete 一起检查：if (elementsEvent.complete && myFieldsComplete) ...

当然，完成。它只是将你的代码变成一个函数来检查你自己的字段，并在事件处理程序中使用它。