如何在部分输入框未填写时阻止表单提交？

我完全懂你的困扰——你已经写好了各个输入框的校验规则，但不知道怎么把这些规则和阻止表单提交的逻辑串起来。其实核心思路很简单：先预设表单可以提交，然后在每一项校验不通过时标记“不能提交”，最后根据这个标记决定要不要阻止表单提交。

先给你看修改后的完整代码，咱们再一步步拆解：

document.getElementById("gumb").onclick = function(event) {
  // 初始化提交状态为允许
  let slanje_forme = true;
  // 重置所有错误提示和边框样式，避免旧信息干扰
  document.getElementById("demo").innerHTML = "";
  document.getElementById("demo1").innerHTML = "";
  document.getElementById("demo2").innerHTML = "";
  document.getElementById("demo3").innerHTML = "";
  document.getElementById("demo4").innerHTML = "";
  document.getElementById("NazivProizvoda").style.border = "";
  document.getElementById("sifra").style.border = "";
  document.getElementById("opisProizvoda").style.border = "";
  document.getElementById("cijena").style.border = "";
  document.getElementById("kategorija").style.border = "";

  // 获取所有输入值，去除首尾空格避免无效输入
  const x = document.getElementById("NazivProizvoda").value.trim();
  const t = document.getElementById("sifra").value.trim();
  const y = document.getElementById("kategorija").value.trim();
  const z = document.getElementById("opisProizvoda").value.trim();
  const u = document.getElementById("cijena").value.trim();

  // 逐项校验，不通过则标记提交状态为false
  if (x.length < 5 || x.length > 30) {
    document.getElementById("demo").innerHTML = "Naziv mora imati 5 do 30 znakova!";
    document.getElementById("NazivProizvoda").style.border = "1px solid red";
    slanje_forme = false;
  }
  if (t.length !== 10 || isNaN(t)) {
    document.getElementById("demo1").innerHTML = "Sifra mora imati 10 znakova i biti broj!";
    document.getElementById("sifra").style.border = "1px solid red";
    slanje_forme = false;
  }
  if (z.length < 10 || z.length > 100) {
    document.getElementById("demo2").innerHTML = "Opis mora biti izmedu 10 i 100 znakova!";
    document.getElementById("opisProizvoda").style.border = "1px solid red";
    slanje_forme = false;
  }
  if (u === "" || isNaN(u)) {
    document.getElementById("demo3").innerHTML = "Cijena mora biti validan broj!";
    document.getElementById("cijena").style.border = "1px solid red";
    slanje_forme = false;
  }
  if (y === "") {
    document.getElementById("demo4").innerHTML = "Molimo odaberite kategoriju!";
    document.getElementById("kategorija").style.border = "1px solid red";
    slanje_forme = false;
  }

  // 统一判断是否阻止表单提交
  if (!slanje_forme) {
    event.preventDefault();
  } else {
    document.getElementById("demo4").innerHTML = "Input OK";
  }
};

关键逻辑说明： #

• 初始化与重置：一开始把slanje_forme设为true（默认允许提交），每次点击按钮时清空之前的错误提示和红色边框，避免旧信息误导用户。
• 逐项校验：把原来的else if改成独立if，这样能同时显示所有错误（比如用户填错了产品名称和价格，能一次性看到两个提示）；每发现一个不符合规则的输入，就把slanje_forme设为false。另外修正了边框样式（你原来写的1px red不生效，正确写法是1px solid red），给输入值加了trim()避免空格干扰。
• 统一阻止提交：所有校验完成后，只需要一次判断：如果slanje_forme是false，就调用event.preventDefault()阻止表单提交，不需要在每个校验分支里单独写阻止逻辑，代码更简洁清晰。

对你疑问的解答： #

完全不需要在每个else if里单独写阻止提交的代码，只需要用一个变量跟踪整体校验状态，最后统一判断即可。这种方式不管后续新增多少校验项，都能轻松管理提交逻辑。

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