Question

37

jQuery .blur() event not firing

rated 0 times [ 43] [ 6] / answers: 1 / hits: 20759 / 12 Years ago, sun, december 2, 2012, 12:00:00

I have a simple login form like below, with an attached jQuery script. I'm trying to make some simple client-side form validation using jQuery. I can't seem to get the blur event to fire, however. I can't think of what I'm doing wrong, I've tried using '.on('blur', fn(){})' but that doesn't work either. Please help!

Here's my HTML file:

<!doctype html>

<html>

    <head>

        <meta charset=utf-8>

        <title>DMIT 222 - Catalogue Project: Admin Login</title>

        <link rel=stylesheet type=text/css href=../styles/divs.css />

        <link rel=stylesheet type=text/css href=../styles/fonts.css />

        <link rel=stylesheet type=text/css href=../styles/tags.css />

        <link rel=stylesheet type=text/css href=../styles/tables.css />

        <link rel=stylesheet type=text/css href=styles/forms.css />

        <script src=http://code.jquery.com/jquery-latest.js></script>

        <script src=../scripts/loginFormValidation.js></script>

    </head>

    <body>

        <div id=wrapper>

            <header>

                <h1>Ship Catalogue</h1>

            </header>

            <div id=mainContent>

                <form id=LoginForm name=LoginForm method=post action=<?php echo $_SERVER['PHP_SELF']; ?>>

                    <div class=FormRow><label for=Username>Username:</label><input type=text name=Username id=Username /><p id=userErrors><?php echo $userErrors; ?></p></div>

                    <div class=FormRow><label for=Password>Password:</label><input type=password name=Password id=Password /><p id=passwordErrors><?php echo $passwordErrors; ?></p></div>

                    <div class=FormRow><input type=submit name=Submit value=Login! /></div>

                </form>

            </div>

            <footer>

                <a href=http://www.logicanddesign.ca/>Site Developed by Logic &amp; Design</a>

            </footer>

        </div>

    </body>

</html>

And here's the loginFormValidation.js script:

$(#Username).blur(function(e){

    alert();

    if ($(#Username).val() == ) {

        $(#userErrors).text(Username must be entered!);

    }

});



$(#Password).blur(function(e){

    if ($(#Password).val() == ) {

        $(#passwordErrors).text(Password must be entered!);

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseg

Add To Favorites

Follow

Total Points: 460

Total Questions: 96

Total Answers: 90

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

answered 12 Years ago orlando · Accepted Answer

Either add your jquery blur code inside

$(document).ready(function() { ...// your blur code here }

OR
at bottom of your page above closing body tag like:

<script type=text/javascript>

//your blur code

</script>



</body>