You have to use delegation, use focusout event instead of blur, blur event doesn't bubbles and delegation need propagation to work:
$(document).on('focusout',".no_pipes",function() {
var str = $(this).val(); // you could use this.value instead
alert(str); // ---> it alerts nothing!
if (str.indexOf("|") >= 0) {
alert("The informatin you provided contains illegal characters(\"|\")");
$(this).css('border', '1px solid pink');
var that = $(this);
setTimeout(function() {
that.focus()
}, 0);
} else {
$(this).css('border', '1px solid #ccc');
}
});