HTML/JavaScript表单验证与数学函数应用：库存管理系统实现指南

// 修正前：获取NodeList
// var stock = document.getElementsByName('stock');
// 修正后：直接获取元素值并转换为整数
var stockVal = parseInt(document.getElementById('stock').value) || 0;
// 使用 || 0 可以在输入为空时将其视为0，避免NaN

// ... 其他计算和验证 ...

// 在返回总和之前，计算并显示余额
var bal = stockVal - tot;
document.getElementById('balance').value = bal;

return tot; // 确保返回总和供ValidateTotal使用

<!-- 移除或修改此处的id，例如改为 id="totalInput" 如果它有其他用途 -->
<!-- <input class="input100" type="number" step="1" name="total" id="totalInput" placeholder="Total ABC"> -->

<!-- 确保这个是唯一的id="total" 用于显示计算结果 -->
<span style="color:red;">Total : 
<input type="text" name="displayTotal" id="total" size="2" readonly="readonly">Validations : 
<input type="text" name="new" id="new" size="5" readonly="readonly"></span>

function findTotal() {
  // 1. 获取库存值，并确保转换为整数，如果为空则默认为0
  var stockVal = parseInt(document.getElementById('stock').value) || 0; 

  // 2. 获取需要求和的输入元素
  var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]');
  var tot = 0;

  // 3. 遍历并计算总和
  for (var i = 0; i < arr.length; i++) {
    // 确保输入值是有效的数字才进行累加
    if (!isNaN(parseInt(arr[i].value))) { 
      tot += parseInt(arr[i].value);
    }
  }

  // 4. 更新总和显示字段 (使用修正后的唯一ID)
  document.getElementById('total').value = tot;

  // 5. 验证总和是否为50的倍数并更新验证状态
  if ((tot % 50) == 0) {
    document.getElementById('new').value = "correct";
  } else {
    document.getElementById('new').value = "incorrect";
  }

  // 6. 计算并显示余额 (确保在return之前执行)
  var bal = stockVal - tot;
  document.getElementById('balance').value = bal;

  // 7. 返回总和供ValidateTotal函数使用
  return tot; 
}

function ValidateTotal() {
  // 调用 findTotal 获取当前计算的总和
  var y = findTotal(); 
  if ((y % 50) == 0) {
    return true; // 验证通过
  } else {
    alert("Total Must be in multiples of 50"); // 提示错误
    return false; // 验证失败，阻止表单提交
  }
}

<form class="contact100-form validate-form" onsubmit="return ValidateTotal(this)" method="post" action="portal.php" class="simple-form">
  <span class="contact100-form-title">
    Portal <br><span style="color:red;"><span style="font-size: 80%"> Data Submission for '.$datadate.' </span></span>
  </span>

  <div class="wrap-input100 validate-input" data-validate="Value 1">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="vala" id="vala" placeholder="Value A">
  </div>
  <div class="wrap-input100 validate-input" data-validate="Value 2">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="valb" id="valb" placeholder="Value B">
  </div>
  <div class="wrap-input100 validate-input" data-validate="Value 3">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="valc" id="valc" placeholder="Value C">
  </div>

  <div class="wrap-input100 validate-input" data-validate="Value 4">
    <!-- 这个字段不参与总和计算 -->
    <input class="input100" type="number" step="1" name="vald" id="vald" placeholder="Value D not in total">
  </div>

  <!-- 移除或修改此处的id，避免与下面的readonly input重复 -->
  <!-- <div class="wrap-input100 validate-input" data-validate="Total">
    <input class="input100" type="number" step="1" name="totalInput" id="totalInput" placeholder="Total ABC">
  </div> -->

  <div class="wrap-input100 validate-input" data-validate="stock">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="stock" id="stock" placeholder="Total Stock">
  </div>
  <div class="wrap-input100 validate-input" data-validate="balance">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="balance" id="balance" placeholder="balance">
  </div>

  <span style="color:red;">
    Total : 
    <!-- 确保此处的id="total"是唯一的，用于显示计算出的总和 -->
    <input type="text" name="displayTotal" id="total" size="2" readonly="readonly">
    Validations : 
    <input type="text" name="new" id="new" size="5" readonly="readonly">
  </span>

  <div class="container-contact100-form-btn">
    <button class="contact100-form-btn">
      Submit
    </button>
  </div>
</form>