jQuery validation on form not working

Question

I'm new to jQuery and I'm trying to use it to validate a login form. However, the validation script doesn't activate: it just sits there doing nothing, while disabling the submit button. I think it is interfering with another script running on the same form, which lets the user switch between different forms in the same div.

Here's the html:

<div class="box">
    <?php if (isset($_SESSION['login'])){ ?>
        <h2>Welcome back, <?php echo $_SESSION['username']; ?></h2>
        <div><p><a href="logout.php">Click here to log outt</a></p></div>
    <?php } else { ?>
        <div id="form_wrapper" class="form_wrapper">
            <div class="register"> <!-- First form -->
            <form id="registrationform">
        <h2>Register</h2>
        <div class="box">
           <div>
               <label>Name:</label>
               <input name="nomeagenzia" type="text" required />
               </div>
           <!-- Some other input fields -->
               <input type="submit" value="Register" />
           <a href="#" rel="login" class="linkform">Already a user? Login here</a>
        </div>
        </form>
        </div>

        <div class="login active"> <!-- Second form, the one I'm validating-->
        <form id="loginform" action="index.php" method="POST">
        <h2>Area Agenzie</h2>
        <div class="box">
        <div>
            <label>Username:</label>
        <input name="username" type="text" />
        </div>
        <div style="position:relative;">
            <label>Password:</label>
                <a href="#" rel="forgot_password" class="linkform" style="right:0; position:absolute; margin-right:3px;">Forgot your password?</a>
            <input name="password" type="password" />
        </div>
    <input name="submit" type="submit" value="Login" />
        <a href="#" rel="register" class="linkform">Register here!</a>
        </div>
        </form>
        </div>
        <!-- There's a third form I omitted -->                 
        </div>
    <?php } ?>
</div>

Here is the javascript to switch between the forms:

$(function() {
    var $form_wrapper = $('#form_wrapper'),
    $currentForm = $form_wrapper.children('div.active'),
    $linkform = $form_wrapper.find('.linkform');

    $form_wrapper.children('div').each(function(i){
        var $theForm = $(this);
        if(!$theForm.hasClass('active'))
        $theForm.hide();
        $theForm.data({
            width : $theForm.width(),
            height : $theForm.height()
        });
    });
    setWrapperWidth();

    $linkform.bind('click',function(e){
        var $link = $(this);
        var target = $link.attr('rel');
        $currentForm.fadeOut(100,function(){
            $currentForm.removeClass('active');
            $currentForm= $form_wrapper.children('div.'+target);
            $form_wrapper.stop()
                .animate({
                    width : $currentForm.data('width') + 'px',
                    height : $currentForm.data('height') + 'px'
                },225,function(){
                    $currentForm.addClass('active');
                    $currentForm.fadeIn(100);
            });
        });
        e.preventDefault();
    });

    function setWrapperWidth(){
        $form_wrapper.css({
            width : $currentForm.data('width') + 'px',
            height : $currentForm.data('height') + 'px'
        });
    }
});

Here's the validation script:

$(document).ready(function()
{  
    $("#loginform").validate(  
    {  
        rules:{  
        'username':{  
            required: true,
            remote:{  
                url: "php/validatorAJAX.php",  
                type: "post"  
                }  
            },  
        'password':{  
            required: true  
            }  
        },  
        messages:{  
        'username':{  
            required: "Il campo username è obbligatorio!",
            remote: "L'username non esiste!" 
            },  
        'password':{  
            required: "Il campo password è obbligatorio!"  
            }  
        },
        submitHandler: function(form){
        if($(form).valid())
            form.submit();  
        return false;
        }           
    });
});  

Finally, this is validatorAJAX.php included in the validation script:

<?php
$mysqli = new mysqlc();
function usernameExists($username){
    $username = trim($username);
    $stmt = $mysqli->prepare("SELECT COUNT(*) AS num FROM utenti WHERE username= ?");
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $stmt->bind_result($result);
    $result = (bool)$stmt->fetch();
    $stmt->close();
    return $result;
}

if(isset($_POST['username'])){
    if(usernameExists($_POST['username'])){
        echo 'true';
    }else{
        echo 'false';
    }
}
?>

You can test out the script at http://pansepol.com/NEW , and you'll see that nothing happens when you click "Submit" on the login_form. Moreover, no validation is done whatsoever. I'm going nuts here :)

Answer 1

I fixed it: there was a problem with the validatorAJAX.php, which causes the whole form to crash. Basically the mysqli object was initialized outside the function, and this caused the validation to fail.