Why the output from javascript just shown for a short period of time?

Question

I am developing a Registration form for my assignment. All things are working but when I click on the submit button, the warning messages on the label are just shown for a very short period of time. I am using eclipse and apache tomacat. here is my code. JSP Code:

<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid"/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname"/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname"/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email"/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
<input type="submit" value="Submit Bid" onclick="validate()"/>
</form>

Javascript Code:

function validate()
{
    var itemid=document.getElementById("itemid").value;
    var itemname=document.getElementById("itemname").value;
    var uname=document.getElementById("uname").value;
    var email=document.getElementById("email").value;
    var amount=document.getElementById("amount").value;
    var autoincrement=document.getElementById("autoincrement");
    var flag=true;
    if(itemid.length==0){
    flag=false;
    document.getElementById("itemid_l").innerHTML="<b>Required field!</b> Item Id: ";
    }
    if(itemname.length==0){
    flag=false;
    document.getElementById("itemname_l").innerHTML="<b>Required field!</b> Item Name: ";
    }
    if(uname.length==0){
    flag=false;
    document.getElementById("uname_l").innerHTML="<b>Required field!</b> Your Name: ";
    }
    if(email.length==0){
    flag=false;
    document.getElementById("email_l").innerHTML="<b>Required field!</b> Your Email Address: ";
    }
    if(amount.length==0){
    flag=false;
    document.getElementById("amount_l").innerHTML="<b>Required field!</b> Amount Bid: ";
    }
    if(!autoincrement.checked){
    flag=false;
    document.getElementById("autoincrement_l").innerHTML="<b>Required field!</b> Auto-increment to match other bidders:: ";
    }
    if(flag==true){     
        alert('Good job!!');
        return true;
    }
    else
    {
        document.getElementById("msg").innerHTML="Required data is missing. Please fill";
        return false;
    }
}

Any suggestion will help me a lot..

Answer 1

You can use onsubmit event so that whenever user click on submit button this gets call and if the function validate() return true form will get submitted else it will not submit form .

Demo code :

function validate() {
  var itemid = document.getElementById("itemid").value;
  var itemname = document.getElementById("itemname").value;
  var uname = document.getElementById("uname").value;
  var email = document.getElementById("email").value;
  var amount = document.getElementById("amount").value;
  var autoincrement = document.getElementById("autoincrement");
  var flag = true;
  if (itemid.length == 0) {
    flag = false;
    document.getElementById("itemid_l").innerHTML = "<b>Required field!</b> ";
  } else {
    //if fill remove error any
    document.getElementById("itemid_l").innerHTML = ""
  }
  if (itemname.length == 0) {
    flag = false;
    document.getElementById("itemname_l").innerHTML = "<b>Required field!</b> ";
  } else {
    //if fill remove error any
    document.getElementById("itemname_l").innerHTML = "";
  }
  if (uname.length == 0) {
    flag = false;
    document.getElementById("uname_l").innerHTML = "<b>Required field!</b>  ";
  } else {
    document.getElementById("uname_l").innerHTML = "";
  }
  if (email.length == 0) {
    flag = false;
    document.getElementById("email_l").innerHTML = "<b>Required field!</b> ";
  } else {
    document.getElementById("email_l").innerHTML = "";
  }
  if (amount.length == 0) {
    flag = false;
    document.getElementById("amount_l").innerHTML = "<b>Required field!</b>";
  } else {
    document.getElementById("amount_l").innerHTML = "";
  }
  if (!autoincrement.checked) {
    flag = false;
    document.getElementById("autoincrement_l").innerHTML = "<b>Required field!</b>";
  } else {
    document.getElementById("autoincrement_l").innerHTML = "";

  }
  if (flag == true) {
    document.getElementById("msg").innerHTML = "";
    alert('Good job!!');
    flag = true; //do true
  } else {
    document.getElementById("msg").innerHTML = "Required data is missing. Please fill";
    flag = false; //do false
  }
  return flag; //return flag
}

<!--add onsubmit -->
<form method="post" id="forms" onsubmit="return validate()">
  <h2>Welcome to AP Auctions. Please Enter Bid</h2>
  <span id="msg" style="color:red;font-size:25px"></span><br/>
  <!--give id to span instead of label-->
  <label> <span id="itemid_l"></span>Item Id:</label> <input type="text" name="itemid" id="itemid" /><br/>
  <label><span id="itemname_l"></span>Item Name:</label> <input type="text" name="itemname" id="itemname" /><br/>
  <label><span id="uname_l"></span>Your Name:</label> <input type="text" name="uname" id="uname" /><br/>
  <label><span id="email_l"></span>Your Email Address:</label> <input type="text" name="email" id="email" /><br/>
  <label><span id="amount_l"></span>Amount Bid:</label> <input type="number" name="amount" id="amount" /><br/>
  <label><span id="autoincrement_l"></span>Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
  <input type="submit" value="Submit Bid" />
</form>

Also , if you just need to check for empty field you can just use required attribute on input tag like below :

<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<!--added required attribute-->
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid" required/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname" required/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname" required/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email" required/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"required/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement" required><br/>
<input type="submit" value="Submit Bid"/>
</form>