如何使用javascript中弹出添加errormessages而不是警报框 [英] How to add errormessages instead of alert boxes in pop up using javascript

问题描述

我需要使用JavaScript来验证日期格式文本框里面弹出。而不是使用警告框的，我需要显示类似于的document.getElementById（MainContent_ErrorMsg）的错误信息。innerHTML的=请输入有效日期。结果
是否有任何其他的方法来实现这种行为？
我的JavaScript code是：

  VAR STARTDATE =的document.getElementById（MainContent_uscEventParameters_txtEarliestStartDate）;
    VAR ENDDATE =的document.getElementById（MainContent_uscEventParameters_txtLatestEndDate）;
    VAR validformat = / ^ \\ d {4} \\  -  \\ D {2} \\  -  \\ D {2} $ /;
    如果（（startdate.value.match（validformat））及！及（enddate.value.match（validforamt）））
    {
        警报（请输入有效的日期格式）;
        //document.getElementById(\"MainContent_ErrorMsg\").innerHTML =请输入有效的日期;
    }
 

解决方案

而不是显示警报对话框，你旁边的元素用简单而纯粹的JavaScript可以显示消息：

 函数AddErrorLabel（元素，味精）{
    VAR oLabel =使用document.createElement（跨度）;
    oLabel.className =ERROR_MSG;
    oLabel.innerHTML =味精;
    VAR父= element.parentNode;
    如果（element.nextSibling）{
        如果（element.nextSibling.className！==ERROR_MSG）{
            parent.insertBefore（oLabel，element.nextSibling）;
        }
    }
    其他{
        parent.appendChild（oLabel）;
    }
}
 

用法：

 如果（！（startdate.value.match（validformat））及及（enddate.value.match（validforamt）））
{
    AddErrorLabel（开始日期，请输入有效的日期格式）;
}
 

现场测试案例。 （保留文本框为空，然后点击提交）

像jQuery库有这样的功能和更好的但对于简单的需求，这应该足以和它的使用基本的JavaScript这样的跨浏览器。

I need to validate the date format in textbox inside popup using JavaScript. Instead of using alert boxes , I need to display the error messages similar to document.getElementById("MainContent_ErrorMsg").innerHTML = "Please Enter valid date".
Is there any other method to achieve this behavior? My JavaScript code is:

    var startdate = document.getElementById("MainContent_uscEventParameters_txtEarliestStartDate");
    var enddate = document.getElementById("MainContent_uscEventParameters_txtLatestEndDate");
    var validformat=/^\d{4}\-\d{2}\-\d{2}$/;
    if (! (startdate.value.match(validformat)) && (enddate.value.match(validforamt)) )
    {
        alert("please enter valid date format");
        //document.getElementById("MainContent_ErrorMsg").innerHTML = "Please enter valid date";
    }

解决方案

Instead of showing alert dialog, you can show the message next to the element using simple and pure JavaScript:

function AddErrorLabel(element, msg) {
    var oLabel = document.createElement("span");
    oLabel.className = "error_msg";
    oLabel.innerHTML = msg;
    var parent = element.parentNode;
    if (element.nextSibling) {
        if (element.nextSibling.className !== "error_msg") {
            parent.insertBefore(oLabel, element.nextSibling);
        }
    }
    else {
        parent.appendChild(oLabel);
    }
}

Usage:

if (! (startdate.value.match(validformat)) && (enddate.value.match(validforamt)) )
{
    AddErrorLabel(startdate, "please enter valid date format");
}

Live test case. (Leave the textbox empty and click submit)

Libraries like jQuery have such features and much better but for simple needs, this should be just enough and it's using basic JavaScript thus cross browser.

这篇关于如何使用javascript中弹出添加errormessages而不是警报框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！