我的表單未正確顯示錯誤消息

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

您可以添加 function 來檢查金額是否實際上是有效金額，並使用此 function 更多地操作您的代碼。

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