Question

我构建了一个在线表单并在此处发布 --> https://www.worthit.cc/

它有一个内置错误，只要点击提交按钮并且任何字段为空，就会触发该错误。但是，它并不总是像应有的那样显示。

这是 GitHub 上完整代码的链接：https://github.com/ZacharyFoxLuke/Worth-It

这里是有问题的 JS：

$modal = $('.modal-frame')
$modal_Rewards_Info = $('#inputFields #rewards-info-message')
$modal_Transaction_Fee = $('#inputFields #transactionFee-info-message')
$modal_Profit = $('#profit-message')
$modal_Loss = $('#loss-message')
$modal_BreakEven = $('#break-even-message')
$modal_Error = $('#error-message')
$modal_About = $('#about-message')
$modal_Contact = $('#contact-message')
$submitButton = $('#submitButton')
$dollarsProfit = $('.dollarsProfit')
$dollarsFee = $('.dollarsFee')
$dollarsNet = $('.dollarsNet')

$submitButton.click(function () {
    const purchaseAmount = document.getElementById('purchaseAmountInput').value
    const rewardsRate = document.getElementById('rewardsRateInput').value / 100
    const transactionFeeInput = document.getElementById('variFeeInput').value / 100
    const transactionFeeNet = purchaseAmount * transactionFeeInput
    const earnedRewards = purchaseAmount * rewardsRate
    
    if (purchaseAmount === '' || rewardsRate === '' || transactionFeeInput === '') {
        $modal_Error.toggleClass('active')
        $modal_Error.removeClass('leave')

    } else if (rewardsRate === transactionFeeInput && rewardsRate !== '' && transactionFeeInput !== '' && purchaseAmount !== '') {
        $modal_BreakEven.toggleClass('active')
        $modal_BreakEven.removeClass('leave')
        $dollarsProfit.html(rewardsRate * purchaseAmount)
        $dollarsFee.html(transactionFeeNet)

    } else if (rewardsRate < transactionFeeInput && rewardsRate !== '' && transactionFeeInput !== '' && purchaseAmount !== '') {
        $modal_Loss.toggleClass('active')
        $modal_Loss.removeClass('leave')
        $dollarsProfit.html(rewardsRate * purchaseAmount)
        $dollarsFee.html(transactionFeeNet)
        $dollarsNet.html(earnedRewards - transactionFeeNet)

    } else if (rewardsRate > transactionFeeInput && rewardsRate !== '' && transactionFeeInput !== '' && purchaseAmount !== '') {
        $modal_Profit.toggleClass('active')
        $modal_Profit.removeClass('leave')
        $dollarsProfit.html(rewardsRate * purchaseAmount)
        $dollarsFee.html(transactionFeeNet)
        $dollarsNet.html(earnedRewards - transactionFeeNet)

    }
    
})

Answer 1

您可以添加一个函数来检查金额是否实际上是有效金额，并使用此函数对您的代码进行更多操作。

checkTheAmount = (item) => {
  if (item && parseFloat(item) > 0) return true;
  return false;
};

checkTheAmount = (item) => {
  if (item && parseFloat(item) > 0) return True;
  return False;
};

$submitButton.click(function () {
  const purchaseAmount = document.getElementById("purchaseAmountInput").value;
  const rewardsRate = document.getElementById("rewardsRateInput").value / 100;
  const transactionFeeInput =
    document.getElementById("variFeeInput").value / 100;
  const transactionFeeNet = purchaseAmount * transactionFeeInput;
  const earnedRewards = purchaseAmount * rewardsRate;

  if (
    checkTheAmount(purchaseAmount) == false ||
    checkTheAmount(rewardsRate) == false ||
    checkTheAmount(transactionFeeInput) == false
    
  ) {
    $modal_Error.toggleClass("active");
    $modal_Error.removeClass("leave");
  } else if (
    rewardsRate === transactionFeeInput &&
    rewardsRate !== "" &&
    transactionFeeInput !== "" &&
    purchaseAmount !== ""
  ) {
    $modal_BreakEven.toggleClass("active");
    $modal_BreakEven.removeClass("leave");
    $dollarsProfit.html(rewardsRate * purchaseAmount);
    $dollarsFee.html(transactionFeeNet);
  } else if (
    rewardsRate < transactionFeeInput &&
    rewardsRate !== "" &&
    transactionFeeInput !== "" &&
    purchaseAmount !== ""
  ) {
    $modal_Loss.toggleClass("active");
    $modal_Loss.removeClass("leave");
    $dollarsProfit.html(rewardsRate * purchaseAmount);
    $dollarsFee.html(transactionFeeNet);
    $dollarsNet.html(earnedRewards - transactionFeeNet);
  } else if (
    rewardsRate > transactionFeeInput &&
    rewardsRate !== "" &&
    transactionFeeInput !== "" &&
    purchaseAmount !== ""
  ) {
    $modal_Profit.toggleClass("active");
    $modal_Profit.removeClass("leave");
    $dollarsProfit.html(rewardsRate * purchaseAmount);
    $dollarsFee.html(transactionFeeNet);
    $dollarsNet.html(earnedRewards - transactionFeeNet);
  }
});

我的表单未正确显示错误消息

1 个答案: