Disabling ordinary link button during form Validation

Disabling ordinary link button during form Validation

Hi,
I've got a JQuery Mobile form working across multiple "pages", even though it is a single HTML file.
This is done by placing the opening form tag before the <div data-role="page" id="screen1"> tag, and closing it after the final losing page div tag. Works great.

Currently the form validation is properly flagging each field as the user leaves it.

The only trouble I am having is making the continue button at the bottom of each screen disabled until the visible invalid fields pass validation.

Can anyone help please?

Here's the simplified version of the code:



<!DOCTYPE HTML>
<html>
    <head>
     <link href="css/jquery.mobile-1.0a4.css" rel="stylesheet" type="text/css" />
     <link href="css/sunny/jquery-ui-1.8.10.custom.css" type="text/css" rel="Stylesheet" />  
   <script src="js/jquery-1.5.1.min.js" type="text/javascript" ></script>
   <script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
   <script src="js/jquery.mobile-1.0a4.min.js" type="text/javascript"></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>
    <script src="js/additional-methods.js" type="text/javascript"></script>
    <script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() { alert("Submitted!"); $(form).submit();}
});

$(document).ready(function() {
    // validate each field as we go along
    $("#form1").validate({
            onfocusout: function(element) {
            this.element(element);
            }
        }); 
});
</script>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form action="foo.php" method="post" id="form1">
<body>  
    <div data-role="page" id="screen1">

    <div data-role="header">
        <h1>Login</h1>
    </div><!-- /header -->

    <div data-role="content">   

            <div data-role="fieldcontain">
                <label for="name">Username:</label>
                <input type="text" name="name" id="name" value=""  class="required"/>
            </div>
            <div data-role="fieldcontain">
                <label for="name">Screen Name:</label>
                <input type="text" name="alias" id="screenname" value=""  class="required"/>
            </div>

            <div data-role="fieldcontain">
                <p><a href="#screen2" data-role="button" data-theme="a" data-transition="slideup">Continue</a>  </p>
            </div>
        </div>   <!-- /content -->
     <div data-role="footer">
           
    </div><!-- /footer -->
        </div><!-- /page -->       
    
   <div data-role="page" id="screen2">    
        <div data-role="header">
        <h1>Login</h1>
    </div><!-- /header -->
    <div data-role="content">       
    <div data-role="fieldcontain">      
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" value="" class="required"/>
    </div>   
    <div class="ui-body ui-body-b">
        <button class="btnLogin" type="submit" data-theme="a">Login</button>     
    </div>
</div><!-- /content -->
    <div data-role="footer">
        <h4>Page Footer stuff</h4>
    </div><!-- /footer -->
</div><!-- /page -->
 </form>
</body>
</html>

Thanks in advance!!!