Question

I have a login dropdown much like Twitter. You can check it out here http://mashup2.sunnydsouza.com/index3.php

Currently am using JQuery validation plugin to check whether the username/pass fields are entered before clicking submit. What I want is that if a user enters an incorrect username/password, the error login message should come within the dropdown itself, under the password field, without reloading the entire page again

But when user enters correct username/password, the page would refresh and the ‘Sign In’ would now replace with the username of the user entered (that will a dropdown too, with Control panel,logout options etc)

Can someone please help me out with this? How to do it in jQuery?

EDIT:

Following is the dropdown code

        <fieldset id="signin_menu">
              <form method="post" id="signin" action="index3.php">
                  <label for="username">Username or email</label>
                   <input id="username" name="username" value="" title="username" class = "required" tabindex="4" type="text">
              </p>
              <p>
                <label for="password">Password</label>

                <input id="password" name="password" value="" title="password" tabindex="5" class="required" type="password">
              </p>
              <p class="remember">
                <input id="signin_submit" value="Sign in" tabindex="6" type="submit" name="user_login">
                <input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
                <label for="remember">Remember me</label>
              </p>
              <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>

              <p class="forgot-username"> <A id=forgot_username_link title="If you remember your password, try logging in with your email"  href="#">Forgot your username?</A> </p>
            </form>
          </fieldset> 

I want that when user enters an invalid username/password, an error message appears within this dropdown itself

Answer 1

So you can add a “required” class to both input fields, then hook some code like this:

var $form = $("#signin");
$form.validate();
$form.submit(function() {
if (!$form.valid()) {
    return false;
}});