Измените предупреждение JS на сообщение об ошибке DOM div - PullRequest
Новая
       11

Измените предупреждение JS на сообщение об ошибке DOM div

3 голосов
/ 21 июня 2011

Мне нужно преобразовать мои сообщения об ошибках в позиционный 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;

Ответы [ 2 ]

2 голосов
/ 22 июня 2011

Простой подход с использованием 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();
})
0 голосов
/ 22 июня 2011

очень простой, но он должен дать вам хорошее направление. По сути, вы создаете div, который скрыт, и тогда вы заполните интервал внутри вашего текста и покажете div. 

<Div id="myalertbox" style='display:none'>
<span>put message here</span>
</div>

Я всегда использую jquery для изменения DOM. Делает вещь намного проще. 

jquery("#myalertbox span").text(bnadd_msg_002);
jquery("#myalertbox").show();

Тогда просто используйте CSS для позиционирования DIV. возможно, придется установить DIV в положение Absolute, затем использовать верхнюю и левую позиции, чтобы поместить его в середину экрана. 

You may need to surround the DIV with another DIV.
<div id="grayout">
<Div id="myalertbox" style='display:none'>
<span>put message here</span>
</div>
</div>

Показать серый экран в полноэкранном режиме, но установить его прозрачность. Как правило, пользователи не смогут нажимать на экран, пока отображается сообщение об ошибке.

Или просто получите jquery, и у него есть встроенное окно сообщения об ошибке.

http://api.jquery.com/jQuery.error/

...