突出显示标记并将标记写入javascript中的文本框

Question

I have a Textbox on a form. I Want to highlight the textbox and write a tag in the bottom of the text box in javascript. i am doing the following to get the value,

var form = getAdjustedForm(obj, modelKey);
var reasonText = document.getElementById("AlertSuppression_Reason").value;

if (reasonText == "" || reasonText.length == 0 || reasonText == null) {         
    $('#AlertSuppression_Reason').text("This Trade will be updated.");
    document.getElementById('AlertSuppression_Reason').style.borderColor  = "red";      
}

With this the textbox is turning red but its not writing a tag. I want something like:

Answer 1

You need to create a text container, like span , that's gonna be hidden by default. Then you need to add an event listener like onkeyup to the textbox that's gonna detect its value's length, if the textbox is empty, then display the text.

Example in pure JS:

https://jsfiddle.net/9tbj2gw6/