javascript - 如果某些输入区域未填写，如何防止表单提交

Question

正如标题所说，我需要这部分代码的帮助

function myFunction() {
var x,t,y,z,u;

我需要使用这部分来检查是否所有内容都已填写，如果不是则不能提交表单

document.getElementById("gumb").onclick=function(event){
   var slanje_forme=true;
   if (slanje_forme!=true)event.preventDefault();

}
x = document.getElementById("NazivProizvoda").value;
t = document.getElementById("sifra").value;
y = document.getElementById("kategorija").value;
z = document.getElementById("opisProizvoda").value;
u = document.getElementById("cijena").value;

if (isNaN(x) || x.length < 5 || x.length > 30) {
    document.getElementById("demo").innerHTML = "Naziv mora imati 5 do 30znakova!";
    NazivProizvoda.style.border="1px red";
} 
else if(isNaN(t) || t.length != 10)
{ document.getElementById("demo1").innerHTML = "Sifra mora imati 10 znakova";
        sifra.style.border="1px red";
}
else if(isNaN(z) || z.length < 10 || z.length > 100)
{document.getElementById("demo2").innerHTML = "Opis mora biti izmedu 10 i 100 znakova!"; 
        opisProizvoda.style.border="1px red";
}
else if(isNaN(u))
{ document.getElementById("demo3").innerHTML = "Cijena mora biti napisana";
        cijena.style.border="1px red";
}
<!--if else(isNaN(y) || t.length != 10)-->
<!--{}-->

else {
    text = "Input OK";
}
 document.getElementById("demo4").innerHTML = text;


}

我的问题是我不知道如何将所有的 if 语句包装在 preventDefault() 或 返回假， 我需要这样写吗

else if(isNaN(u))
  { document.getElementById("demo3").innerHTML ="Cijena mora biti napisana";
        cijena.style.border="1px red";
}

Answer 1

HTML

1. 将表单控件包装在 <form> 中标签。
2. 添加 required attribute到需要用户完成的每个表单控件。

请参阅演示 1

---

JavaScript

这可以通过 setAttribute() 以编程方式完成。在演示 2 中，我们使用 HTMLFormControlsCollection API引用所有<form>标签及其表单控件。虽然有些 form controls 不需要 required属性，它是无害的，但它是困惑的标记。 removeAttribute() 方法可以用来清理它们，或者可以使用更精确的方法，如 querySelectorAll() 在演示 3 中。

请参阅演示 2 和演示 3

---

测试

单击提交 按钮，然后在 <input> 中包含和不包含文本文本标签。在每个演示中 <form>标签设置为发送到 live test server 。成功提交数据后，测试服务器将发送响应。如果 <input>标签为空，submit事件被取消，工具提示将提醒用户在适用的表单控件中输入数据。

---

演示1

<form id='F' action="https://httpbin.org/post" method="post">
  <label>Name: </label>
  <input id="F0" name='F0' required placeholder="First" >
  <input id="F1" name='F1' required placeholder="Last">
  <input type="submit">
</form>

---

演示2

const F = document.forms.F;
const fx = F.elements;

for (let f = 0; f < fx.length; f++) {
  fx[f].setAttribute("required", true);
}

<form id='F' action="https://httpbin.org/post" method="post">
  <label>Name: </label>
  <input id="F0" name='F0' placeholder="First">
  <input id="F1" name='F1' placeholder="Last">
  <input type="submit">
</form>

---

演示3

var inputs = document.querySelectorAll('input[type=text]');

inputs.forEach(function(fc, idx, inputs) {
  fc.setAttribute("required", true);
});

<form id='F' action="https://httpbin.org/post" method="post">
  <label>Name: </label>
  <input id="F0" name='F0' type="text" placeholder="First">
  <input id="F1" name='F1' type="text" placeholder="Last">
  <input type="submit">
</form>