Question

I have a textbox where the text wil be formatted using a function with some regular expressions. The function is tested and works fine.
When adding underneath code that should bind a focusout event to the specific textbox for reformatting the text, but the function isn’t triggered.

$(document).ready(function() {
    $('#PostcodeTextBox').focusout(function() {
        $('#PostcodeTextBox').val(PostcodeFormatting($('#PostcodeTextBox').val()));
    });
    $('#PostcodeTextBox').blur(function() {
        $('#PostcodeTextBox').val(PostcodeFormatting($('#PostcodeTextBox').val()));
    });
})


function PostcodeFormatting(pc) {
    var reg = /^([1-9]\d{3})\s?([a-z]{2})$/i;
    var postcode = $.trim(pc);
    if (postcode && postcode.match(reg)) {
        return postcode.replace(reg, "$1$2").toUpperCase();
    }
    else {
        return "Postcode incorrect";
    }
};

what am I doing wrong or what do I forget.

Answer 1

Try combining those two event bindings and see if it works. I’d probably lean towards blur due to event bubbling but both should fire when the input loses focus.

$(function() {
    $('#PostcodeTextBox').on('blur', function() {
        $(this).val(PostcodeFormatting($(this).val()));
    });
})

Here’s what works for me (tested). Blur or Focusout works similarly.:

Script:

$(function() {
    $('#PostcodeTextBox').on('blur', function() {
        $(this).val(PostcodeFormatting($(this).val()));
        console.log('hit');
   });
});

function PostcodeFormatting(pc) {
    ...
}

Check your HTML as well for spelling and case sensitivity:

<input type="text" id="PostcodeTextBox" />