title: Error doesnt get displayed in span tag on form submit in html - Jquery
body: <p>I am new to jquery. I am trying to create a form in which if the user does not enter username the user will get a error. I have created a form which has input text, a span tag and a button. If i click on the button and the username field, the span tag should be visible.</p>
  
  <p>My HTML code looks like: 
      </p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="check1.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;body&gt;      
    &lt;div&gt;
      &lt;form id="myform" method="post"&gt;
              &lt;table border="1"&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;input type="text" id="uname"/&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                    &lt;span class="error"&gt;please enter data&lt;/span&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;button id="check"&gt; submit&lt;/button&gt;                      
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
      &lt;/form&gt;
    &lt;/div&gt;                
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>My style.css file:</p>
  
  <pre><code>.error
  {
      visibility: hidden;
  }
  
  .error_show
  {
      visibility: visible;
      color: red;
  
  }
  </code></pre>
  
  <p>And the JQuery file:</p>
  
  <pre><code>$(document).ready(function() {
      $("#myform").on("submit", function(){
          var uname = $("#uname").val();
          if(uname == "")
          {
              $(".error").addClass("error_show");
          }
      });
  
  });
  </code></pre>
  
  <p>I have used form submit in JQuery. The error gets diaplayed for less than a second. Why is that happening? Is there anything wrong in the code?</p>