How to generate an error message in the form if any of the fields is empty

Question

<form onsubmit="chkform()"> <table> <tr><td>name</td><td><input type="text" id="uname"/></td></tr> <tr><td></td><td><div id="er1"></div></td></tr> <tr><td>address</td><td><input type="text" id="add"/></td></tr> <tr><td></td><td><div id="er2"></div></td></tr> </table> </form> <script> function chkform() { if (document.getElementById("uname").value === "" ) { document.getElementById("er1").innerHTML = "name cant be left blank"; document.getElementById("er1").style.color = "red"; document.getElementById("er1").style.display = "block"; } } </script> 

I want to show an error message in a div if any of the fields is left blank and this message should disappear when you click on a text field.

Answer 1

  <form onsubmit="return false"> <table> <tr><td>name</td><td><input type="text" id="uname"/></td></tr> <tr><td></td><td><div id="er1"></div></td></tr> <tr><td>address</td><td><input type="text" id="add"/></td></tr> <tr><td></td><td><div id="er2"></div></td></tr> </table> <input type="submit" onclick="chkform()"/> </form> <script> function chkform() { if (document.getElementById("uname").value === "" ) { document.getElementById("er1").innerHTML = "name cant be left blank"; document.getElementById("er1").style.color = "red"; document.getElementById("er1").style.display = "block"; } } </script> 

Answer 2

Using the following will always allow you to add input without re-writing your validation function:

 function chkform() { var form = document.getElementsByTagName('form')[0]; var inputs = form.getElementsByTagName('input'); for(var i = 0; i < inputs.length; i++){ if(inputs[i].value === '') // do your error } } 

Working violin

Answer 3

I think you need to return to

 <form onsubmit="return chkform()"> 

and

return false in a block with a red warning

which is working.

i.e.

 <form onsubmit="return chkform()"> 

 function chkform() { if (document.getElementById("uname").value === "") { . . . return false; } if (document.getElementById("car").value == "truck") { . . . return false; } . . . } 

Answer 4

Try adding both input blocks to the array and scroll through them to see if they are entered or not.

I edited your code.

 function chkform() { var inputs = []; inputs[0] = document.getElementById("uname"); inputs[1] = document.getElementById("add"); for( i =0; i < inputs.length; i++) { if (inputs[i].value === "" ) { document.getElementById("er1").innerHTML = "Please fill out all form inputs!"; document.getElementById("er1").style.color = "red"; document.getElementById("er1").style.display = "block"; } } } 

Answer 5

You must add another part to the if condition, which will take care of deleting the error message when the thge field has been filled.

 else { document.getElementById("er1").innerHTML = ""; document.getElementById("er1").style.display = "none"; } 

http://codepen.io/anon/pen/gxJid