将JS警报更改为DOM错误消息div [英] Change JS alert to DOM error message div

问题描述

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

I need to convert my error messaging to a positioned div (hidden initially) instead of the standard js alert. I realize I need to push the alert message to the DOM, but I'm new to javascript. Any help would be appreciated.

另外，我需要在没有确认的情况下做到这一点（因此在场焦点上删除了错误信息）

Additionally, I need to do it without a confirm (so error message removes on field focus)

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;

推荐答案

使用jQuery的简单方法

Simple approach using 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用于清除文本输入字段焦点上的消息。您始终可以选择将哪个字段附加到该事件。

JS for clearing message on focus of a text input field. You can always be more selective about which fields to attach the event to.

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

这篇关于将JS警报更改为DOM错误消息div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！