jQuery UI + LiveValidation

Not letting proccess to the next table unless 1st tab is completed

by MrTest

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script src="http://livevalidation.com/javascripts/src/1.3/livevalidation_standalone.compressed.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css">
<div class="main">
    
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Form 1</a></li>
            <li><a href="#tabs-2">Form 2</a></li>
            <li><a href="#tabs-3">Form 3</a></li>
            <li><a href="#tabs-4">Form 4</a></li>
            <li><a href="#tabs-5">Form 5</a></li>
        </ul>
        <div id="tabs-1">    
            <p>Form 1</p>
            <form action="#" method="post"> 
                <table>
                    <tr>
                        <th>Email (required):</th>
                        <td><input type="text" id="field1" />
                            <script type="text/javascript">
                                var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
                                field1.add( Validate.Presence );
                                field1.add( Validate.Email );
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <th>First Name (required):</th>
                        <td><input type="text" id="field2" />
                            <script type="text/javascript">
                                var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
                                field2.add( Validate.Presence );
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <th>Last Name (required):</th>
                        <td><input type="text" id="field3" />
                            <script type="text/javascript">
                                var field3 = new...

CSS

@charset "utf-8";
/* layout styles */
body { margin: 0px; padding: 0px;}
*:focus { outline: none;}
.main { width: 500px; height: auto; background: #f2f2f2 none; margin: 10px auto 0px; padding: 20px; border: 1px dashed #ccc; }
.main form table { width: 500px; color: #72767D; overflow: hidden; }
.main form table tr th { /* [disabled]width: 200px; */ font-size: 12px; line-height: 12px; font-weight: normal; height: 12px; padding-top: 7px; padding-bottom: 17px; }
.main form table tr td { position: relative; display: block; height:26px; width: 300px; background: #f2f2f2; padding-bottom: 10px; }

.main form table tr td input { background: #fff none; border: 1px dashed #ccc; font-size: 12px; line-height: 12px; font-weight: normal; height: 16px; padding-top: 5px; padding-bottom: 5px; width: 280px; padding-left: 20px; }
.main form table tr .submit { float: right; display: block; width: 75px; height: 26px;}
/* on focus and onhover image effect*/
.main form table tr td input:hover, .table-class-2 tr td input:focus { background: url(http://dl.dropbox.com/u/17683975/edit.png) no-repeat 2px center; background-color: #fff; }
/* error image effect*/
.main form table tr td .LV_invalid { position: absolute; top: 0px; right: 0px; z-index: 10; height: 26px; text-indent: -666em; width: 26px; background: url(http://dl.dropbox.com/u/17683975/error.png) no-repeat 5px center;}
.main form table tr td .LV_valid { position: absolute; top: 0px; right: 0px; z-index: 10; height: 26px; text-indent: -666em; width: 26px; background: url(http://dl.dropbox.com/u/17683975/check.png) no-repeat 5px center;}
/* error field border effect */
.main form table tr td .LV_valid_field { border: 1px dashed #ccc;}
.main form table tr td .LV_invalid_field { border: 1px dashed #cc0000;}
.main #tabs p { font-size: 12px;}

.main #tabs ul li a { font-size: 12px; padding: 3px; /* [disabled]border: 1px solid #ccc; */ }

JavaScript

$(document).ready(function() {
    $('#tabs').tabs();
    $('#tabs .submit').addClass($('#tabs div')[0].id);

});

$("form").each(function(i) {
    var automaticOnSubmit = this.onsubmit;
    this.onsubmit = function() {
        var valid = automaticOnSubmit();
        if (valid) {
            $(this).parent().addClass('ui-tabs-hide').addClass('valid'); //hide current
            $('.ui-tabs-panel:not(.valid):first').removeClass('ui-tabs-hide');
           // $(this).parent().nextAll(':not(.valid)').filter(':first').removeClass('ui-tabs-hide'); //show next
            $('.ui-tabs-selected').filter('.ui-state-active').addClass('valid')
            $('.ui-tabs-nav .valid').removeClass('ui-tabs-selected').removeClass('ui-state-active');
            $('.ui-tabs-nav .valid').next(':not(.valid):first').addClass('ui-tabs-selected').addClass('ui-state-active');

        }
        else {
            $(".LV_invalid_field:first", document.getElementById(this.id)).focus();
            $('.ui-tabs-nav .ui-tabs-selected').filter('.valid').removeClass('valid');
            $('#tabs div').filter('.valid').removeClass('valid');

        }
        return false;
    };
});