jQuery Validation Problems
<p>I have a jQuery in-line form validation that i am using, it was working fine but when I decided to change my web interface now it has the following problems when I submit the form without valid entries.</p>

<ol>
<li>The page cannot scroll with the error prompts</li>
<li>If i navigate to another page the error prompts are still visible.</li>
</ol>

<p>below is my code snipet</p>

<pre><code> &lt;script&gt;
            jQuery(document).ready( function() {
                // binds form submission and fields to the validation engine
                jQuery("#inputlab").validationEngine();
            });
   &lt;/script&gt;          

          &lt;form id="inputlab"  method="post" action=""&gt;
          &lt;fieldset&gt;
          &lt;legend id="biodata"&gt;Test Information&lt;/legend&gt;
            &lt;table  cellpadding="10"&gt;

                &lt;tr&gt;


                    &lt;td&gt;Test Name&lt;/td&gt;
                     &lt;td&gt;&lt;input type="text" name="testname" id="testname" class="validate[required,custom[onlyLetterSp]]" size="30" /&gt;&lt;/td&gt;

                     &lt;td&gt;Amount&lt;/td&gt;
                     &lt;td&gt;&lt;input type="text" name="amount" id="amount" class="validate[required,custom[onlyLetterSp]]" size="30" /&gt;&lt;/td&gt;


                   &lt;td&gt; &lt;input type="submit" name="submit" class="button" Value="Add Test"&gt;&lt;/td&gt;
                  &lt;!--   &lt;td&gt;&lt;/td&gt;&lt;td&gt; &lt;a class="button_grey"&gt;&lt;span&gt;Submit this form&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;--&gt;
               &lt;/tr&gt;
             &lt;/table&gt;
             &lt;/fieldset&gt;
          &lt;/form&gt;
</code></pre>

<p>Please help</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;

&lt;title&gt;AfricMed | Modern Record System Application&lt;/title&gt;


&lt;link type="text/css" href="js/jqueryui/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" /&gt;
&lt;link type="text/css" href="css/validationEngine.jquery.css" rel="stylesheet" /&gt;

&lt;script type="text/javascript" src="js/jquery-1.5.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jqueryui/js/jquery-ui-1.8.11.custom.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/ui.tabs.closable.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jqueryui/development-bundle/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jqueryui/development-bundle/ui/jquery.ui.accordion.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.layout-latest.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jqueryui/development-bundle/ui/jquery.ui.datepicker.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.validationEngine.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.validationEngine-en.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/plugins/DataTables/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.form.js"&gt;&lt;/script&gt;

&lt;style type="text/css"&gt;
    #myAccordion .ui-accordion-content { padding: 6 0 15 15; }

    label { color:ffffff;}

&lt;/style &gt;
&lt;script&gt;
    $(document).ready(function () {
        $('body').layout({ applyDefaultStyles: true });
    $("#myAccordion").accordion({
        animated: "bounceslide"
    });
    var mainTab = $("#contentTab").tabs({closable: true});
    $("#checkup").click(function(){

    mainTab.tabs('add','checkup.php','CheckUp');
    var newIndex = mainTab.tabs("length") - 1;
    mainTab.tabs("select", newIndex);
    });

    $("#registration").click(function(){

    mainTab.tabs('add','reception.php','Registration');
    var newIndex = mainTab.tabs("length") - 1;
    mainTab.tabs("select", newIndex);

    });

    $("#visits").click(function(){

    mainTab.tabs('add','visits.php','Visits');
    var newIndex = mainTab.tabs("length") - 1;
    mainTab.tabs("select", newIndex);
    });

    $("#search").click(function(){

        mainTab.tabs('add','search.php','Search');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
        $("#inputPhar").click(function(){

        mainTab.tabs('add','inputPhar.php','Input Drugs');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });

    $("#bookPhar").click(function(){

        mainTab.tabs('add','bookPhar.php','Pharmacy Bookings');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });

    $("#pharSales").click(function(){

        mainTab.tabs('add','pharSales.php','Daily Pharmacy Sales');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#inputLab").click(function(){

        mainTab.tabs('add','inputLab.php','Input Tests');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#bookLab").click(function(){

        mainTab.tabs('add','bookLab.php','Lab Bookings');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#labSales").click(function(){

        mainTab.tabs('add','labSales.php','Daily Lab Sales');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#addLabour").click(function(){

        mainTab.tabs('add','addLabour.php','Add Labour');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#bookLabour").click(function(){

        mainTab.tabs('add','bookLabour.php','Labour Bookings');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#addDelivery").click(function(){

        mainTab.tabs('add','addDelivery.php','Add Delivery');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#viewLabour").click(function(){

        mainTab.tabs('add','viewLabour.php','View Labour');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#viewDelivery").click(function(){

        mainTab.tabs('add','viewDelivery.php','View Delivery');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });
    $("#nurseLabour").click(function(){

        mainTab.tabs('add','nurseLabour.php','Nurse');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });

$("#pettyCash").click(function(){

        mainTab.tabs('add','nurseLabour.php','Petty Cash');
        var newIndex = mainTab.tabs("length") - 1;
        mainTab.tabs("select", newIndex);
        });

$("#transaction").click(function(){

    mainTab.tabs('add','nurseLabour.php','Financial Transaction');
    var newIndex = mainTab.tabs("length") - 1;
    mainTab.tabs("select", newIndex);
    });
$("#companyBills").click(function(){

    mainTab.tabs('add','nurseLabour.php','Company Bills');
    var newIndex = mainTab.tabs("length") - 1;
    mainTab.tabs("select", newIndex);
    });
$("#insuranceBills").click(function(){

    mainTab.tabs('add','nurseLabour.php','Insurance Bills');
    var newIndex = mainTab.tabs("length") - 1;
    mainTab.tabs("select", newIndex);
    });
$("#financePayments").click(function(){

    mainTab.tabs('add','nurseLabour.php','Payments');
    var newIndex = mainTab.tabs("length") - 1;
    mainTab.tabs("select", newIndex);
    });


    });
&lt;/script&gt;

&lt;/head&gt;


&lt;body&gt;

&lt;div class="ui-layout-center"&gt;

&lt;div class="ui-widget"&gt;
  &lt;div class="ui-widget-header ui-corner-top"&gt;
    &lt;h4&gt;Main Content&lt;/h2&gt;&lt;/div&gt;
  &lt;div class="ui-widget-content ui-corner-bottom"&gt;
&lt;div id="contentTab"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#a"&gt;Main&lt;/a&gt;&lt;/li&gt;

  &lt;/ul&gt;
  &lt;div id="a"&gt;Welcome to AfriMed Medical Record System&lt;/br&gt;&lt;/div&gt;

    &lt;/div&gt;

   &lt;/div&gt;
&lt;/div&gt;


&lt;/div&gt;
&lt;div class="ui-layout-north"&gt;
&lt;div class="ui-widget"&gt;
&lt;div class="ui-widget-header ui-corner-top"&gt;
    &lt;h4&gt;AfriMed Medical Software&lt;/h2&gt;&lt;/div&gt;


&lt;/div&gt;
&lt;/div&gt;
&lt;div class="ui-layout-west"&gt;

&lt;div class="ui-widget"&gt;
  &lt;div class="ui-widget-header ui-corner-top"&gt;
    &lt;h4&gt;Navigation&lt;/h4&gt;&lt;/div&gt;
  &lt;div class="ui-widget-content ui-corner-bottom"&gt;

&lt;div id="myAccordion"&gt;
  &lt;h2&gt;&lt;a href="#"&gt;Reception&lt;/a&gt;&lt;/h2&gt;

    &lt;div class="ui-widget"&gt;
  &lt;div class="ui-state-default  "&gt;
    &lt;a href="#" id="registration"&gt;Registration&lt;/a&gt;&lt;/div&gt;
  &lt;div class="ui-state-default "&gt;
    &lt;a href="#" id="checkup"&gt;Checkup&lt;/a&gt;&lt;/div&gt;
    &lt;div class="ui-state-default "&gt;
    &lt;a href="#" id=""&gt;Consultation&lt;/a&gt;&lt;/div&gt;
    &lt;div class="ui-state-default "&gt;
    &lt;a href="#"&gt;Payments&lt;/a&gt;&lt;/div&gt;
    &lt;div class="ui-state-default "&gt;
    &lt;a href="#" id="visits"&gt;Visits&lt;/a&gt;&lt;/div&gt;
    &lt;div class="ui-state-default "&gt;
    &lt;a href="#" id="search"&gt;Search&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;


  &lt;h2&gt;&lt;a href="#"&gt;Pharmacy&lt;/a&gt;&lt;/h2&gt;
  &lt;div&gt;pharmacy.&lt;/div&gt;
  &lt;h2&gt;&lt;a href="#"&gt;Laboratory&lt;/a&gt;&lt;/h2&gt;
        &lt;div class="ui-widget"&gt;
                  &lt;div class="ui-state-default  "&gt;
                    &lt;a href="#" id="inputLab"&gt;Input Test&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="bookLab"&gt;Book Test&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="labSales"&gt;Daily Sales&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
&lt;h2&gt;&lt;a href="#"&gt;Labour&lt;/a&gt;&lt;/h2&gt;
        &lt;div class="ui-widget"&gt;
                  &lt;div class="ui-state-default  "&gt;
                    &lt;a href="#" id="addLabour"&gt;Register Labour&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="bookLabour"&gt;Book Labour Visits&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="addDelivery"&gt;Add Delivery&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="viewLabour"&gt;View Labour Patients&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="viewDelivery"&gt;View Delivery&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="nurseLabour"&gt;View Patients Under Nurse&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
&lt;h2&gt;&lt;a href="#"&gt;Theater&lt;/a&gt;&lt;/h2&gt;
  &lt;div&gt;Theater.&lt;/div&gt;
&lt;h2&gt;&lt;a href="#"&gt;Finance&lt;/a&gt;&lt;/h2&gt;
        &lt;div class="ui-widget"&gt;
                  &lt;div class="ui-state-default  "&gt;
                    &lt;a href="#" id="pettyCash"&gt;Petty Cash&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="transaction"&gt;Financial Transaction&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="companyBills"&gt;Company Bills&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="insuranceBills"&gt;Insurance Bills&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="ui-state-default "&gt;
                    &lt;a href="#" id="financePayments"&gt;Payments&lt;/a&gt;&lt;/div&gt;

            &lt;/div&gt;
&lt;/div&gt;



&lt;/div&gt;


&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>i am using the following jQuery plugins </p>

<pre><code>&lt;script type="text/javascript" src="js/jquery.validationEngine.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.validationEngine-en.js"&gt;&lt;/script&gt;
</code></pre>
