Blur jquery trigger blur not working perfectly right?

Question

I am confused what is going on here ... it should be basic, but I cannot understand it.

I precede the form with some information that needs to be verified against the database. When the form loads, I want javascript to trigger a “blur” of events for the two input fields that I need to check.

This is what happens. When the form loads all the data, it displays correctly, but the trigger event (“blur”) for the “username” and “email address” inputs does not fire. However, if I manually place the cursor in each of the inputs and then press the tab key or go out of the field, the “blur” event is triggered.

I need it to also start when the page loads to warn the user if the pre-populated data contradicts existing data ... any idea what I'm doing wrong or how to do it?

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 pull out validation functions from the blur event for username and email elements and turn them into your named function or functions? Then call the function on the page for loading and blurring events (for these two elements). Your code works correctly, because when you load a page, you start blurring on something that was not focused on.

Answer 2

This should work as expected.

... , , .

• HTML-
• jQuery script
• "testinput"

• script

  $(document).ready(function(){
      $("#testInput").blur(function(){
          alert(1);
      });
  
      $("#testInput").trigger("blur");
  });