I managed to make some progress by adding invalid class to the element to have red border as follow.
I also have tooltip implemented so that when users hover the input with red border, it will show the validation message in details but somehow tooltip does not shown up. When I inspect the generated codes in debugger, the control contains many generated html elements. There are two input generated, the first one has style display inline and visible. The second one look very similar to the first one but has style display to none. when I uncheck the display none style, the tooltip seems to work (I have a tooltip which filter any control has class = .invalid). Any idea why?
01.if(newValue)02.{03. element.addClass("invalid");04. element.attr("validationMessage", newValue);05. }06.else{07. element.removeClass("invalid");08. element.removeAttr("validationMessage");09.}