使用 javascript 验证，当其中没有数据时，文本框突出显示红色

Question

我有一个文本框，当我点击它（聚焦）时它会突出显示红色。如果我在其中键入任何内容，它会突出显示为灰色。但是当我在其中键入内容并再次删除其中的所有数据时，它不会突出显示回红色。请帮助我。这是我用来将其突出显示为红色和灰色的一段代码：

$("#fname").bind('focus', function (e) {
    if ((document.getElementById("fname").value).length == 0) {
        document.getElementById("fname_error").style.display = "inline";
        $("#fname").attr('style', 'border: 1px solid #8C0005 !important;');

        return false;
    }
    else {
        document.getElementById("fname_error").style.display = "none";
    }
    return true;
});

$("#fname").keypress(function (e) {
    var iKeyCode = (e.which) ? e.which : e.keyCode


    if ((iKeyCode > 64 && iKeyCode < 91) || (iKeyCode > 96 && iKeyCode <      123) || iKeyCode==8 || iKeyCode == 9 ) {

                document.getElementById("fname_error").style.display = "none";
                $("#fname").attr('style', 'border: 1px solid #cccccc !important;');
                return true;

    }
    else {
            document.getElementById("fname_error").style.display = "inline";
            return false;
        }

});

Answer 1

那是因为您在 focus 事件处理程序中设置了红色边框，如果元素已经获得焦点，则不会触发此事件。

尝试将此代码移动到 keyup 处理程序。

使用 javascript 验证，当其中没有数据时，文本框突出显示红色

Textbox Highlight red when no data inside it using javascript validation

javascript

html

umbraco4