Question

I have a form that contains various tables. These tables are shown or hidden when the next button is clicked. So this virtually provides a navigation to the user from one page to another while the form is same and just the tables are shown/hidden. Now what I need is validate these table on click of next button (a hyperlink type) and show a validation summary each time. I know validate can be used for the whole form but I need to just validate the table elements and then show the summary.

Keep in mind that I am using non obtrusive client side validation, the elements are being created using that model thing. Also, it currently does that validation but on submit button at the end. very brief sample of my table

<table id= "table1">
    <tr>
        <td1>First coulmn</td1>
        <td2>value2</td2>
        <td3>
            <a id="Next" onclick= "javascript:function1()">Save</a>
        </td3>
    </tr>
</table>

Answer 1

<table id= "table1">
    <tr>
        <td1>First coulmn</td1>
        <td2>value2</td2>
        <td3>
            <a id="Next" onclick= "javascript:validAndNext('1')">Save</a>
        </td3>
    </tr>
</table>
    .
    .
    .
<table id="tableN"> 

function validAndNext(table_id){
   var table = $('#table'+table_id);
   var inputs = table.find("input");
   var valid = true;
   inputs.each(function(){
       // A type of validation is:
       if($(this).val().length<=0) valid = false;                
   });
   if(valid){
      table.hide();
      $('#table'+(table_id+1)).show();
   }else alert('Your table is not valid!');
}