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

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（）或 返回false， 我需要像这样写吗

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()方法可用于清理它们，或者可以使用更精确的方法，例如演示3 中的querySelectorAll()。

参见演示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>