Validation For Fun :)

Its just a validation for Fun :)

by krish

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="container">
<label><input type="text" id="t1" value=""/><span class="errd">Please fill the data</span></label>
<br/>
<label><input type="text" id="t2"  value=""/><span class="errd">Please fill the data</span></label>
<br/>
<label><input type="text" id="t3" value=""/><span class="errd">Please fill the data</span></label>
<br/>
<label><input type="text" id="t4" value=""/><span class="errd">Please fill the data</span></label>
<br/>
<div id="oc"></div>

<input type="button" value="submit" id="doneit"/>

</div>

CSS

#container input[type="text"]{}
.errclass{border:1px solid red;border:1px solid red;}


/*animation declaration for text box error alert :p*/
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

JavaScript

$('.errd').css('display','none');

$('#doneit').click(function(){
   
var err="Error at the line  ";
     $('#oc').empty();
$('input[type="text"]').each(function(){
  var all= $(this).val();
  if(all == "" )
  {
      $(this).effect( "shake" );
    $(this).addClass('errclass');
   $(this).next().fadeIn();
   $('#oc').append(err+$(this).attr('id')+'<br/>');
  }
    else{$(this).next().fadeOut();$(this).removeClass('errclass');}
   
    
 });
    
});