Jquery tabs, how to indicate validation errors in other tabs when saving from another tab

Question

I am using jquery tabs to allow my user to enter information. So right now I have also 5 tabs and each tabs have a couple of fields in them. Many fields have client side jquery validation used for them. And across each tab I have used a common save button.

So say the user is on TAB 2 and he tries to save but the validation on TAB 1 fails, so in such cases I want to tell the user that TAB 1 has some validation error which he needs to correct and then only can he save.

So for this I was planning to add a error icon next to the tab name whenever that tab has any validation errors.

How do I add an icon to the tab header ?

Is there any other better idea which I could use for my problem. Please advice.

Answer 1

Here is what I used, with a little help from the fiddle which Drixson Oseña shared in his comment. Hope this helps others too :)

Update fiddle : http://jsfiddle.net/yrshaikh/rcgAX/2/

Html

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor<span id="tab1" class="boing">!</span></a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab1</p>
  </div>
  <div id="tabs-2">
    <p>Tab2</p>
  </div>
  <div id="tabs-3">
    <p>Tab3</p>
  </div>
</div>

<input type="button" value="Show Error on Tab2" id="add" />
<input type="button" value="Hide Error on Tab2" id="remove" />

Jquery

$(document).ready(function(){

    $( "#tabs" ).tabs();

    $("#add").click(function(){
    $("#tab1").css('visibility',  'visible');
    });    

    $("#remove").click(function(){
    $("#tab1").css('visibility',  'hidden');
    });

});

Css

.boing {
    margin-left:5px;
    color:red;
    visibility: hidden;
}