How to prevent a form submit if some of the input areas are not filled

Question

as the title says i need help with this part of the code

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

i need to use this part to check if everything is filled, and if it isnt the form must not be submitted

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;


}

my problem is that i dont know how to wrap all of the if statements within the preventDefault() or return false, do i need to write it like this

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

Answer 1

HTML

1. Wrap your form controls in a <form> tag.
2. Add required attribute to each form control that needs the user to complete.

See Demo 1

---

JavaScript

Programatically this can be done with setAttribute(). In Demo 2, we are using the HTMLFormControlsCollection API to reference all <form> tags and their form controls. Although some form controls do not need the required attribute, it is harmless yet it is messy markup. removeAttribute() method can be used to clean them up or a more precise method could be used like querySelectorAll() in Demo 3.

See Demo 2 and Demo 3

---

Testing

Click the Submit button with and then without text in <input> text tag. In each demo the <form> tag is setup to send to a live test server. Upon a successful submission of data the test server will send a response. If an <input> tag is empty, the submit event is cancelled and a tooltip will remind the user to enter data in the applicable form control.

---

Demo 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>

---

Demo 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>

---

Demo 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>