在线表单提交时空字段错误提示未按预期正常显示问题求助

• 输入值处理逻辑错误：获取rewardsRate和transactionFeeInput两个值时，直接对原始输入值做了/100运算。如果原始输入为空，空字符串做除法运算会得到NaN而非空字符串，后续判空逻辑rewardsRate === ''、transactionFeeInput === ''永远不会命中，导致错误提示无法触发。
• 模态框显示逻辑不合理：使用toggleClass('active')控制错误提示显示，会出现如果之前错误提示已经是激活状态，再次触发判空条件时反而会把active类移除的问题，导致提示偶发消失。
• 缺少旧模态框关闭逻辑：如果上一次操作打开了其他结果模态框，本次触发判空时没有关闭旧模态框，会出现模态框重叠、错误提示被遮挡的问题。

$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')

// 通用模态框关闭函数，避免重复代码
function closeAllModals() {
  $modal.addClass('leave').removeClass('active')
}

$submitButton.click(function () {
    // 先获取原始输入值，先判空再做运算
    const purchaseAmount = document.getElementById('purchaseAmountInput').value.trim()
    const rewardsRateRaw = document.getElementById('rewardsRateInput').value.trim()
    const transactionFeeRaw = document.getElementById('variFeeInput').value.trim()
    
    // 判空逻辑前置，空值直接触发错误提示
    if (!purchaseAmount || !rewardsRateRaw || !transactionFeeRaw) {
        closeAllModals()
        $modal_Error.addClass('active').removeClass('leave')
        return
    }

    // 确认非空后再做数值转换和运算
    const rewardsRate = Number(rewardsRateRaw) / 100
    const transactionFeeInput = Number(transactionFeeRaw) / 100
    const transactionFeeNet = purchaseAmount * transactionFeeInput
    const earnedRewards = purchaseAmount * rewardsRate
    
    if (rewardsRate === transactionFeeInput) {
        closeAllModals()
        $modal_BreakEven.addClass('active').removeClass('leave')
        $dollarsProfit.html(rewardsRate * purchaseAmount)
        $dollarsFee.html(transactionFeeNet)
    } else if (rewardsRate < transactionFeeInput) {
        closeAllModals()
        $modal_Loss.addClass('active').removeClass('leave')
        $dollarsProfit.html(rewardsRate * purchaseAmount)
        $dollarsFee.html(transactionFeeNet)
        $dollarsNet.html(earnedRewards - transactionFeeNet)
    } else {
        closeAllModals()
        $modal_Profit.addClass('active').removeClass('leave')
        $dollarsProfit.html(rewardsRate * purchaseAmount)
        $dollarsFee.html(transactionFeeNet)
        $dollarsNet.html(earnedRewards - transactionFeeNet)
    }
})

• 增加数值合法性校验，避免用户输入非数字内容导致运算异常
• 给输入框增加输入限制，仅允许输入数字和小数点，减少非法输入场景

内容的提问来源于stack exchange，提问作者ApplePieGuy99