如何在JavaScript中高亮TextBox并在其下方添加提示标签？

我来帮你搞定这个需求！你的现有代码只处理了输入框的边框颜色，却没实现下方提示标签的添加，咱们一步步调整代码来达成目标：

问题分析 #

你之前用$('#AlertSuppression_Reason').text("...")是在修改输入框的内容，但这不是咱们要的——咱们需要在输入框下方新增一个提示元素，而不是修改输入框本身的文本。

完整代码实现（jQuery版本） #

咱们可以先检查输入框下方是否已经存在提示标签，避免重复创建；同时处理输入有效时的样式重置，提升用户体验：

var form = getAdjustedForm(obj, modelKey);
var reasonInput = $('#AlertSuppression_Reason');
var reasonText = reasonInput.val();
var errorLabelId = 'AlertSuppression_Reason_error'; // 给提示标签设唯一ID，方便后续操作

// 简化空值判断：覆盖空字符串、全空格的情况
if (!reasonText.trim()) {
    // 1. 设置输入框高亮（红色边框）
    reasonInput.css('borderColor', 'red');
    
    // 2. 处理提示标签
    var errorLabel = $('#' + errorLabelId);
    if (errorLabel.length === 0) {
        // 若提示标签不存在，动态创建一个
        errorLabel = $('<div>')
            .attr('id', errorLabelId)
            .css({
                color: 'red',
                fontSize: '0.875rem',
                marginTop: '4px',
                fontWeight: 'normal'
            });
        // 将提示标签添加到输入框的父元素中，确保在输入框下方
        reasonInput.parent().append(errorLabel);
    }
    // 更新提示内容
    errorLabel.text("This Trade will be updated.");
} else {
    // 输入有效时，清除红色边框并移除提示标签
    reasonInput.css('borderColor', '');
    $('#' + errorLabelId).remove();
}

原生JS版本（无jQuery依赖） #

如果你更倾向于不用jQuery，也可以用原生JS实现同样效果：

var form = getAdjustedForm(obj, modelKey);
var reasonInput = document.getElementById("AlertSuppression_Reason");
var reasonText = reasonInput.value;
var errorLabelId = 'AlertSuppression_Reason_error';
var errorLabel = document.getElementById(errorLabelId);

if (!reasonText.trim()) {
    // 设置输入框红色边框
    reasonInput.style.borderColor = 'red';
    
    if (!errorLabel) {
        // 创建提示标签元素
        errorLabel = document.createElement('div');
        errorLabel.id = errorLabelId;
        errorLabel.style.color = 'red';
        errorLabel.style.fontSize = '0.875rem';
        errorLabel.style.marginTop = '4px';
        // 将提示标签插入到输入框的下一个位置
        reasonInput.parentNode.insertBefore(errorLabel, reasonInput.nextSibling);
    }
    errorLabel.textContent = "This Trade will be updated.";
} else {
    // 输入有效时重置样式并移除提示
    reasonInput.style.borderColor = '';
    errorLabel && errorLabel.remove();
}

关键说明 #

• 用trim()简化空值判断，能覆盖空字符串、全空格等无效输入场景，比原来的多条件判断更简洁。
• 给提示标签设置唯一ID，方便后续查找、更新或移除，避免重复创建元素。
• 添加了else分支，当输入内容有效时自动清除红色边框和提示标签，让界面状态更合理。

这样就能实现你想要的效果：输入框边框变红，下方出现对应的提示标签啦！

内容的提问来源于stack exchange，提问作者user3178465