Как предотвратить отправку формы, если некоторые области ввода не заполнены

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 внутри protectDefault () или вернуть ложь, мне нужно написать это так

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

Answer 1

HTML

1. Оберните элементы управления формы в тег <form>.
2. Добавьте атрибут required к каждому элементу управления формы, который требуется пользователю для завершения.

См. Демо 1

---

JavaScript

Программно это можно сделать с помощью setAttribute(). В Demo 2 мы используем HTMLFormControlsCollection API для ссылки на все теги <form> и их элементы управления формой. Хотя некоторые элементы управления формой не нуждаются в атрибуте required, они безвредны, хотя и являются грязной разметкой. removeAttribute() метод может быть использован для их очистки или более точный метод, такой как querySelectorAll() в Демо 3 .

См. Демо 2 и Демо 3

---

Тестирование

Нажмите кнопку Submit с текстом, а затем без текста в текстовом теге <input>. В каждой демонстрации тег <form> настраивается для отправки на живой тестовый сервер . После успешной отправки данных тестовый сервер отправит ответ. Если тег <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>