.blur not working after page load
<p>I have to make simple  validation. It is working fine on first time but after filling the value in text if you refresh the page by pressing F5 then code will not work correctly.</p>

<p>Step to produce the bug</p>

<ol>
<li><p>Focus on first text box and blur without filling any value. function will alert "error" and class named error will add on text box</p></li>
<li><p>now will value in text box and press F5. Then delete value from text box and blur function will alert 'no error' here is problem. it should alert because we are blur on empty text box.</p></li>
</ol>

<p>I invested-gate and found this problem is occuring because of onload function where I mention code if input text value not equal to blank then blur text box</p>

<pre><code>&lt;head&gt;
  &lt;script type="text/javascript" src="jquery-1.8.3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(function(){
       $('input').blur(function(){
          if($(this).hasClass('error')){
             alert('error')
          }
          else {
             alert('no error')
         }
     }) 
  })

  function test(id){
     if($(id).val()==''){
       $(id).addClass('error')
     }
     else {
       $(id).removeClass('error')
     }
  }

  $(function(){
     setTimeout(function(){
          $('input').each(function(){
             if($(this).val()!=''){
                $(this).blur();
             }
          })
     },1000)
  })
&lt;/script&gt;
&lt;style&gt;
    .error{ border:#F00 solid 1px}
&lt;/style&gt;
&lt;/head&gt;


&lt;body&gt;
    &lt;input type="text" onblur="test(this)"/&gt;
    &lt;input type="text" onblur="test(this)" /&gt;
&lt;/body&gt;
</code></pre>
