使用 javascript 验证表单并将文本返回到 html答案

【问题标题】：Using javascript to validate form and return text to html使用 javascript 验证表单并将文本返回到 html
【发布时间】：2015-07-31 18:37:03
【问题描述】：

我正在使用asp.net 构建一个表单并尝试使用javascript 对其进行验证

验证似乎工作正常，但它没有将文本插入<p></p> 标签。我没有正确使用document.getElementById("errorEmail").innerHTML = text; 还是什么？

下面是我的代码，我添加了一个alert 来帮助解决问题，而alert 正在工作，所以我知道条件正在工作并且正在将值设置为text

    <script>
    function validateForm() {
    alert("testing");

    var x, text;

    x = document.forms["form1"]["textEmail"].value;

    if (x == null || x == "" || x == "Email") {
        alert("testing if conditional");
        text = "Please input your eamail";
        alert(text);
    }
    document.getElementById("errorEmail").innerHTML = text;

    }
    </script>

<form id="form1" runat="server">

        <p id="errorEmail"> </p>
        <asp:TextBox ID="textEmail" runat="server" placeholder="Email" name="email"></asp:TextBox>

        <asp:Button ID="buttonSubmit"  runat="server" Text="Submit Request" OnClientClick="return validateForm();"/>

</form>

【问题讨论】：

标签： javascript html asp.net

【解决方案1】：

您设置文本的方式似乎没有问题。

我不知道 asp.net 是如何工作的，但从 JavaScript 的角度来看，我可以说你应该返回 false 以防出错。提交后您的页面似乎正在刷新。

function validateForm() {
    var x, text;
    x = document.forms["form1"]["textEmail"].value;
    if (x == null || x == "" || x == "Email") {
        text = "Please input your eamail";
        document.getElementById("errorEmail").innerHTML = text;
        return false;
    }
    return true;
}

这是我设置的小提琴，希望对您有所帮助。

http://jsfiddle.net/91wbrzL8/

【讨论】：

你不知道asp 是如何工作的，那没关系，因为你知道javasrcipt 是如何工作的并且你为我解决了这个问题，谢谢！

【解决方案2】：

这是有问题的行（对于获取对表单的引用以及稍后对文本字段的引用无效）：

x = document.forms["form1"]["textEmail"].value;

改为使用：

x = document.getElementById("textEmail").value;

【讨论】：

这两个例子对我来说是一样的，都会显示警报。但是它仍然没有在<p> 标签中设置text 的值。

【解决方案3】：

您显示文本的代码是正确的，问题是您在其他地方遇到了 javascript 错误。调试您的 javascript 以查找错误的来源。

【讨论】：