CODEWITHSUNDEEP
jqueryhtml
FireCrakcer37
FireCrakcer37

Reputation: 1026

jQuery event not working as it should

As I try and say before all of my questions - I'm new to this whole thing. With that being said. I'm working on some client side validation of passwords. I'm trying to make a script that will fill a span with an image if the passwords either don't match, or if either field is blank on blur. I have been unable to get it to show that passwords match, even when I know they do. Here is the relevant code:

html:

    <div class="loginRow">
        <div class="loginCell"><label for="r_password">Password:</label></div>
        <div class="loginCell"><input type="password" name="r_password" id="r_password"></div>
        <div class="loginCell"><span id="r_passwordFeedback"></span></div>
    </div>
    <div class="loginRow">
        <div class="loginCell"><label for"r_vpassword">Verify Password</label></div>
        <div class="loginCell"><input type="password" name="r_vpassword" id="r_vpassword"></div>
        <div class="loginCell"><span id="r_vpasswordFeedback"></span></div>
    </div>

jQuery: 

    $("#r_password").blur(function() {
    if ($("#r_password").val() != $("#r_vpassword").val()) { $("#r_passwordFeedback").html(deleteImg + "Passwords do not match"); }
    else if ($("#r_password").val() || $("#r_vpassword").val() === "") { $("#r_passwordFeedback").html(deleteImg + " Required"); } 
    else { $("#r_passwordFeedback").html(acceptImg); }
});
$("#r_vpassword").blur(function() {
    if($("#r_password").val() != ("#r_vpassword").val()) { $("#r_passwordFeedback").html(deleteImg); }
    else if($("#r_password").val() || $("#r_vpassword").val() === "") { $("#r_passwordFeedback").html(deleteImg); }
    else { $("#r_passwordFeedback").html(acceptImg); }
});

Any help you might be able to shine on my little issue would be much appreciated. Thanks in advance.

Upvotes: 0

Views: 74

Answers (2)

Tats_innit
Tats_innit

Reputation: 34117

HIya demo http://jsfiddle.net/dTEVF/8/ another different version - you can type and match http://jsfiddle.net/Bjc8t/ (Just thought of sharing)

If I may recommend try using validation framework if you have bigger application on the roll! Bit extra what you asked but here you go try it out: http://jsfiddle.net/W5RaU/ :)

jquery code

$("#r_password").blur(function() {
    if ($("#r_password").val() != $("#r_vpassword").val()) {
        $("#r_passwordFeedback").html("Passwords do not match");
    }
    else if ($("#r_password").val() === "" || $("#r_vpassword").val() === "") {
        $("#r_passwordFeedback").html(" Required");
    }
    else {
        $("#r_passwordFeedback").html("matches");
    }

});

$("#r_vpassword").blur(function() {
    if ($("#r_password").val() != $("#r_vpassword").val()) {
        $("#r_passwordFeedback").html("not matching image");
    }
    else if ($("#r_password").val() === "" || $("#r_vpassword").val() === "") {
        $("#r_passwordFeedback").html("empty");
    }
    else {
        $("#r_passwordFeedback").html("password match");
    }
});​

Upvotes: 2

user405398
user405398

Reputation:

There is a typho here if($("#r_password").val() != ("#r_vpassword").val()).

The $ is missing.

I think its, if($("#r_password").val() != $("#r_vpassword").val())

Upvotes: 3

Related Questions