javascript - Validating a form to not submit on empty input boxes -

// html <label>write data:</label> </br> <input type=text id=data name="data"style="width: 14em;">  </br>  </br> <button id="write" type="submit" formaction="/output4" formmethod="post" style="width: 5em;">write</button> <button id="more" type="submit">add more parameters</button>  // js $('#write').click(function(){   $('#data').each(function() {     if ($(this).val() == "" || $(this).val() == null) {       alert("write data must filled out or remove empty parameter list!");        return false;      }   }); }); 

i have program if user clicks on button, more write data boxes appended. not want form submit unless write data boxes filled out. snippet above shows alert box if input if incomplete when press ok, form still submits?

you can use .submit() event handler. use either return false or e.preventdefault() stop submit. note id's unique $('#data') single element, .each() isn't needed:

$('#formidhere').submit(function(e){     if ($('#data').val() == "" || $('#data').val() == null) {        alert("write data must filled out or remove empty parameter list!");        e.preventdefault(); // or `return false`      } }); 

---

for many inputs have input items class value class="data". note need to use e.preventdefault() using e submit event. in case return false .each() , not submit. use here stop .each going don't have many unneeded alerts , checks:

$('#myform').submit(function(e){   $('.data').each(function(){     if ($(this).val() == "" || $(this).val() == null) {        alert("write data must filled out or remove empty parameter list!");        e.preventdefault(); // preventdefault of submit        return false; // stops .each continuing       }   }); }); 

demo