延迟错误消息/警报直到输入两位数字答案

【问题标题】：Delaying An Error Message / Alert Until Two Digits Are Typed延迟错误消息/警报直到输入两位数字
【发布时间】：2020-01-17 15:53:27
【问题描述】：

我有一个表格，允许用户输入他们愿意为总金额支付的百分比。所述总金额是使用高级自定义字段在 Wordpress 仪表板中输入的。然后表单将根据百分比计算的总数发送到支付网关 TouchNet。

以下是用户输入下降百分比的表格：

<input type='text' id="percdown" />

以下是根据输入的下降百分比 (#percdown) 和来自 ACF 字段的总价格 (parcel_price) 计算金额的脚本：

$(function(){

    $('#percdown').on('input', function() {
      calculate();
      });
      function calculate(){
        var parcPrice = <?php the_field('parcel_price'); ?>; 
        var downPerc = parseInt($('#percdown').val());
        var perc="";
        if (downPerc < 10) {
           alert("Down Payment Must Be Above 10%");
           return false;
        };
        if(isNaN(parcPrice) || isNaN(downPerc)){
           perc=" ";
           } else{
             perc = ((parcPrice*(downPerc/100)).toFixed(2));
        }
       $('#AMT').val(perc);
    }
});

以下是显示计算总数的字段，以及提交按钮：

<input type='text' id="AMT" name="AMT" readonly="" />               

<input name="SubmitBtn" type="submit" class="detailButton" id="SubmitBtn" value="Proceed">

当#percdown 小于 10 时，我使用以下脚本禁用提交按钮：

$('#percdown').change(function() {  // When value of total one is changed
  if ($('#percdown').val() > 10)
        $("#SubmitBtn").removeAttr("disabled");
  else
        $("#SubmitBtn").attr("disabled", "disabled");      
  }

);

如您所见，如果他们在#percdown 中输入低于 10 的数字，我已启用“预付款必须高于 10%”的警报，但这会带来一个小问题：当有人键入第一个数字，即“1”，弹出警报。有没有办法在他们输入两个字符之前禁用此警报？

感谢大家的帮助。

【问题讨论】：

标签： forms echo alert

【解决方案1】：

下面的第一个脚本根据 WordPress 仪表板中的 ACF 定价字段和用户输入的百分比计算总数：

    $(function(){

        $('#percdown').on('input', function() {
         calculate();
        });
        function calculate(){
            var parcPrice = <?php the_field('parcel_price'); ?>; 
            var downPerc = parseInt($('#percdown').val());
            var perc="";
            if(isNaN(parcPrice) || isNaN(downPerc)){
                perc=" ";
               } else{
                perc = ((parcPrice*(downPerc/100)).toFixed(2));
               }

            $('#AMT').val(perc);
        }
    });

第二个脚本禁用提交按钮，除非百分比在 10 到 100 之间，并且在有人将光标移动到下一个字段（选项卡或单击外部）之前不会显示警报：

    $('#percdown').change(function() {  // When value of total one is changed
          if ($('#percdown').val() > 10 && $('#percdown').val() < 100 ) {
                  $("#SubmitBtn").removeAttr("disabled");
              }
          else {
                  $("#SubmitBtn").attr("disabled", "disabled");
                  alert("Please enter a value above 10"); 
              }    
          }

    );

【讨论】：