<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 error message in div, if any of the fields are left blank and this message should disappear when text box is clicked.

     <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 error message in div, if any of the fields are left blank and this message should disappear when text box is clicked.

• javascript
• forms

• I don't see any submit button. – Harry Commented Sep 6, 2013 at 12:34
• 1 Why the upvotes? I assume you don't want the message "name cant be left blank" to appear if the address field is empty? have you tried anything else? Also most devs haven't used tables for layout purposes since last century – andrew Commented Sep 6, 2013 at 12:42
• @andrew "... since last century" is unnecessarily derisive hyperbole. – Dave Newton Commented Sep 6, 2013 at 12:54
• You could use <td id="er1"></td></tr> instead of <td><div id="er2"></div></td> if it for error messages only. – rook Commented Sep 6, 2013 at 13:32

5 Answers 5

Try adding both input boxes to an array, and looping through them to test whether they have values entered or not.

I've 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"; 
                  }
            }
    }

Using the following will always allow you to add inputs 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 fiddle

You should add else part to your if condition, that will take care of removing the error message when thge field has been filled.

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

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

I guess you need return to

<form onsubmit="return chkform()">

and

return false in your red alert message block

that works.

i.e.

<form onsubmit="return chkform()">

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

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

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