javascript - 将 JS 警告更改为 DOM 错误消息 div

Question

我需要将我的错误消息转换为定位的 div(最初隐藏)而不是标准的 js 警报。我意识到我需要将警报消息推送到 DOM，但我是 javascript 的新手。任何帮助将不胜感激。

此外，我需要在没有确认的情况下执行此操作(因此错误消息会在字段焦点上删除)

if(el != null) {
                switch(el.name) {
                    case "firstName":              
                        //First Name Field Validation, Return false if field is empty
                        if( f.firstName.value == "" )
                        {
                            alert( bnadd_msg_002 );
                            if ((typeof TeaLeaf != "undefined") && (typeof TeaLeaf.Client != "undefined") && (typeof TeaLeaf.Client.tlAddEvent != "undefined") ) {
                                var nVO = { ErrorMessage : bnadd_msg_002} 
                                var subtype="CustomErrorMsg";
                                TeaLeaf.Event.tlAddCustomEvent(subtype, nVO);
                                    }
                            return false; 
                        }
                        break;

Answer 1

使用 jQuery 的简单方法

function customAlert(msg){
   var div = $("#AlertMessage");
   if (div.length == 0) {
     div = $("<div id='AlertMessage' onclick='$(this).hide();'></div>");
     $("body").prepend(div);
   } 
   div.html(msg)
}

CSS

#WriteProperties {
    background-color: #FFF;
    border: 1px solid #000;
    height: 300px;  
    position: fixed;
    right: 10px; /* position as desired */
    top: 90px; /* position as desired */
    width: 300px;
    z-index: 1000;
}

用于清除文本输入字段焦点消息的 JS。您始终可以更有选择性地选择将事件附加到哪些字段。

$("input[type='text']").live("focus", function(){
  $("#AlertMessage").hide();
})