Question

I’m confused as to what’s going on here…it should be basic, but I can’t quite figure it out.

I’m prepoulating a form with some information that needs to be checked against the database. When the form loads I want javascript to run the “blur” events for the two input boxes I need to verify against.

Here’s whats happening. When the form loads all the data shows properly, but the trigger(“blur”) event for both the “username” and “email” inputs does not get triggered. However, if I manually place the cursor into each of the inputs and then press the tab key, or click outside the box, the “blur” event gets triggered.

I need it to also trigger when the page loads to warn the user if the pre-populated data is in conflict with existing data…any idea what I’m doing wrong or how to make this work?

Thanks in advance.

<script type="text/javascript">
    $(document).ready(function(){
        //Username
        $("#username").blur(function(){
            $("#usr_available_msg").html("Checking").addClass("error_msg ui-state-error");
        });

        //email
        $("#email").blur(function(){
            $("#email_available_msg").html("Checking").addClass("error_msg"); 
        });

        //Run validation check on page load
        $("#username").trigger("blur");
        $("#email").trigger("blur");
    });
</script>

Answer 1

Why not take your ‘checking’ functions out of the blur event for the username and email elements and make them into their own named function or functions? Then call the function on the page load and blur events (for those two elements). Your code is working properly since when the page loads you’re triggering a blur on something that never had focus to begin with.