Onblur triggering everywhere

Question

Update

It appears that the input is locked until I input a well formatted email address and then and only then is the element able to be unlock/unfocus. That is just weird, because if I can't focus any other element then how can the unfocus event get trigger when the current element is still focus. Do you suppose it has to do with something on the server side then?

---

So I have this piece of code that has an input html generated by the server so I can not directly do the onblur=function() in the tag. Instead I use the onclick event of the td to bind an event handler to the input.

<td id="emailInput" class="label" onclick="emailValidation(event);">
   @Html.EditorFor(model => Model.EmailAddress, new { Class = "ignore"})                        
</td>
<td id="emailValidate" style="display: none">
   <label>Please enter a valid email address</label> 
</td>  

in the Javascript file I bind the event handler like so:

function emailValidation(e) {
  $(e.target).on("blur", function () {        
    console.log("what target e is");
    console.log(e.target);
    var inputVal = $(e.target).val();        
    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
    if (!re.test(inputVal)) {
        $(e.target).focus();
        $("#emailValidate").css("display", "inline-block");
    } else {
        $("#emailValidate").css("display", "none");
    }
  }); 
}

I check the dev console and e.target is the input element I want. What is happening is that the onblur event in being trigger after it has been appended and the input is unfocus even though the input element is no longer focus, and I am just clicking random area in the screen. Am I mis-understanding something? Is there a better definition that I can get than the w3school, the developer.mozilla, and this weird one

EDIT

I was trying to create a JSfiddle (w/o server stuff) to demonstrate and it worked fine so upon closer inspection I see the the input element is not being unfocus. It does not matter where I click the cursor remains in the text area, and no other element can be focus now.

Edit 2

As requested the JSFiddle, but it works here but not on the one with server side stuff

Answer 1

Here is a working fiddle: http://jsfiddle.net/Mn5E4/1/

$("#emailMe").on("blur", function () {   
    var inputVal = $(this).val();       
    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
    if (!re.test(inputVal)) {
        $("#emailMe").focus();
        $("#emailValidate").css("display", "inline-block");
    } else {
        $("#emailValidate").css("display", "none");
    }
});

You don't need to bother with using the click event to attach the handler since you know the id of the input you want to bind to.

Edit: Note that this is a fork of your jsFiddle. Based on the code in your question, I would expect the id of the desired input element to be "EmailAddress", in which case you would replace $("#emailMe") with $("#EmailAddress").

Edit2: You can take out any guesswork by doing this:

<td id="emailInput" class="label">
   @Html.EditorFor(model => Model.EmailAddress, new { @class = "ignore validateEmail"})                        
</td>
<td id="emailValidate" style="display: none">
   <label>Please enter a valid email address</label> 
</td>
<script type='text/javascript'>
$(".validateEmail").on("blur", function () {   
    var inputVal = $(this).val();       
    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
    if (!re.test(inputVal)) {
        $(".validateEmail").focus();
        $("#emailValidate").css("display", "inline-block");
    } else {
        $("#emailValidate").css("display", "none");
    }
});
</script>

Note that I passed another class into the EditorFor helper and changed how the class attribute was named to use @ to escape the lower case name "class".

Answer 2

Please try this aproach:

<td id="emailInput" class="label" onclick="emailValidation(event);">
   @Html.EditorFor(model => Model.EmailAddress, new { Class = "ignore"})                        
</td>

 $("#emailInput").on('focusin', "input", function (e) {

    var inputobj = $(this);

        var inputVal = inputobj.val(); 

    var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+@[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
    if (!re.test(inputVal)) {
        inputobj.focus();
        $("#emailValidate").css("display", "inline-block");
    } else {
        $("#emailValidate").css("display", "none");
    }


})

Note: Not tested

Answer 3

You should use $(this)

var inputVal = $(this).val();