JQuery validation from scratch

Question

First time I'm touching JQuery let alone javascript. Worked with this for about 20 minutes and need a wee-bit-o help. My javacript: !!!EDIT!!! just changed to this now

function val_fade1() {
    $("#firstname").bind('keydown', function(){
        var firstnameCount = $(this).val().length;
    }
    $("#lastname").bind('keydown', function(){
        var lastnameCount = $(this).val().length;
    }
    $("#email").bind('keydown', function(){
        var emailCount = $(this).val().length;
    }
    $("#password").bind('keydown', function(){
        var passwordCount = $(this).val().length;
    }
    if(firstnameCount < 2) {
        $("#req_first").show("slow");
    } else if(lastnameCount < 2) {
        $("#req_last").show("slow");
    } else if(emailCount < 5) {
        $("#req_email").show("slow");
    } else if(passwordCount < 5) {
        $("#req_pass").show("slow");
    } else {
        $("#register1").fadeOut();
    }
}

So now what I'd like to have happen is like say you were entering your firstname and it was less than 2 characters, the label that I have currently hidden with CSS that says (please enter a longer name) would show up. As well as the other fields (lastname, email, password). But if all of them are filled out correctly, the "register1" div will fade out.

Here are the parts of my HTML just in case you would need it:

<label>First Name
    <label id="req_first">REQUIRED*<label> 
</label>
<input type="text" name="firstname" id="firstname" class="input-text2" />

<label>Last Name 
    <label id="req_last">REQUIRED*</label>
</label>
<input type="text" name="lastname" id="lastname" class="input-text2" />

<label>E-Mail Address 
    <label id="req_email">REQUIRED*</label>
</label>
<input type="email" name="email" id="email" class="input-text2" />

<label>Password 
    <label id="req_pass">REQUIRED*</label>
</label>
<input type="password" name="password" id="password" class="input-text2" />

And the CSS hides the REQUIRED* labels simply like this:

<style>
#req_first {
    display:none;
}
#req_last {
    display:none;
}
#req_email {
    display:none;
}
#req_pass {
    display:none;
}
</style>

I'm very, very new to JS and JQuery so if you could please explain to me how to make this work , I'd be very greatful, I work mainly with PHP and have PHP validation, but I like the appeal of JQuery fade ins and the PHP could be backup if someone decided to turn off their JS.

Thanks so much guys! -mike

Answer 1

First correct yout HTML and CSS, i have created a prototype, this may help you.

DEMO