CODEWITHSUNDEEP
jqueryhtmlforms
The.Anti.9
The.Anti.9

Reputation: 44668

jQuery .blur doesn't work

I have 3 .blur's and only the first one works for some reason. here's the jquery code:

<script type='text/javascript'>
    $(document).ready(function() {
        $("#user_name").blur(function() {
            if ($(this).val().length > 4) {
                $("#usernamecheckbox").html("<img src='images/checkmark.png' alt='' />");
            } else {
                $("#usernamecheckbox").html("<img src='images/xmark.png' alt='' />");
            }
        });
        $("#pass").blur(function() {
            if ($(this).val().length < 4) {
                $("#passcheckbox").html("<img src='images/xmark.png' alt='' />");
            } 
        });
        $("#confirmpass").blur(function() {
            if ($(this).val() != $("#pass").val()){
                $("#passcheckbox").html("<img src='images/xmark.png' alt='' />");
            } else {
                $("#passcheckbox").html("<img src='images/checkmark.png' alt='' />");
            }
        });
    });
</script>

and here's the form:

<form  enctype="multipart/form-data" method='post' action='reg.php'>
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    <p>Username <span class='sub'>must be atleast 4 characters</span></p>
    <input type='text' name='user_name' id='user_name' /> <div id='usernamecheckbox' class='checkbox'></div><br />
    <p>Password <span class='sub'>must be atleast 4 characters</span></p>
    <input type='password' id='pass' name='pass' /> &nbsp; <input type='password' name='confirm' id='confirmpass' /> <div id='passwordcheckbox' class='checkbox'></div><br />
    <p>E-mail <span class='sub'>must be a valid E-mail address</span></p>
    <input type='text' name='email' id='email' size='40' /> <div id='emailcheckbox' class='checkbox'></div><br />
    <p>Avatar</p>
    <input type='file' name='avatar' /><br /><br />
    <?php
    require_once('recaptchalib.php');
    $publickey = "6LdLYwcAAAAAAEeupJKr_IBviIq-xHX5W98IacgZ"; // you got this from the signup page
    echo recaptcha_get_html($publickey);
    ?>
    <br />
    <input type='submit' value='Submit'>
</form>

Upvotes: 1

Views: 5158

Answers (3)

Kzqai
Kzqai

Reputation: 23072

Frequently I just add css into the jquery selectors chain to see if they've selected correctly:

$('#passcheckbox').css({'background-color':'red'}).etc();

Upvotes: 0

Kenan Banks
Kenan Banks

Reputation: 212000

Change #passcheckbox to #passwordcheckbox

The rest of the code looks fine to me.

Upvotes: 2

Patrick McElhaney
Patrick McElhaney

Reputation: 59271

Before assuming blur() doesn't work you should test it with some simple code, e.g.:

$("#pass").blur(function() {
            alert('#pass blur triggered');
    });

I think the problem is you're looking for $("#passcheckbox"). I don't see anything in your HTML with id="passcheckbox". It looks like you meant $("#passwordcheckbox").

Upvotes: 11

Related Questions