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

This is a pretty ambitious project to start with jQuery...I suggest you start with something more simple. — elclanrs
– elclanrs, Commented Feb 7, 2012 at 8:14
Ohh wait, I messed up my label tags during my copy and paste. theyre correct in the document though lol — user1053263
– user1053263, Commented Feb 7, 2012 at 8:15
You need to attach your if statement to jquery's api.jquery.com/keydown event . — Infra Stank
– Infra Stank, Commented Feb 7, 2012 at 8:17
this is how the html actually looks: <label>First Name<label id="req_first">REQUIRED*</label></label> <input type="text" name="firstname" id="firstname" class="input-text2" /> ... and so on. — user1053263
– user1053263, Commented Feb 7, 2012 at 8:19

xkeshav · Accepted Answer · 2012-02-07 08:40:20Z

1

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

DEMO

answered Feb 7, 2012 at 8:40

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1053263 Over a year ago

OHHH Ok, I see! This will work perfect! And i can add an else in here like: else { $("#register1").fadeOut(); } so if it returns true, it will fade out the register1 div?

user1053263 Over a year ago

Played arund with this, JQuery makes so much more sense, I can't thank you enough bro! God bless!

xkeshav Over a year ago

@user1053263; you can add in else and return true . Please upvote

user1053263 Over a year ago

I need to get 1 more reputaion before I can upvote, otherwise I gladly will. I'm going to ask another question and that should give me that extra one for you.

Collectives™ on Stack Overflow

JQuery validation from scratch

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related