Question

如果我尝试提交空表单，我会尝试显示错误消息。下面的代码显示了应该发生的事情。

 function prepareEventHandlers() {
document.getElementById("frmContact").onsubmit = function () {
    if (document.getElementById("email").value == '') {
        document.getElementById("errorMessage").innerHTML = 'Please provide at least an email address!';
        return false;
    }
    else {
        document.getElementById("errorMessage").innerHTML = '';
        return true;
    }
};
}


window.onload = function () {
prepareEventHandlers();
}

以下是我的cshtml方面的代码：

<form id="frmContact" method="post">
<fieldset>
<legend>Personal Information</legend>
<p>email and other elements here.</p>
<div>
<input type="checkbox" name="checkbox1" checked="false" />
Remind me later <br />
</div>
<p><span id="errorMessage"></span></p>
<input type="submit" value="Send" id="send"/>
</fieldset>
</form>
<script src="http://localhost:53734/Scripts/JScript3.js"></script>

我试过调试它，但它不会在点击时调用prepareEventHandlers方法。尝试将脚本标签粘贴在表单上方，但这也没有做任何事情。

Answer 1

您的表单没有电子邮件的输入元素。您的JavaScript正在寻找带有document.getElementById("email").value电子邮件ID（可能是输入）的元素，但您的表单缺失了。

变化：

<p>email and other elements here.</p>

为：

<p><input id="email" /></p>

然后你的代码运行正常。的 jsFiddle example

Answer 2

您必须拥有一个具有相应ID的元素才能使验证生效。。。这里没有电子邮件ID元素，但您正在尝试验证

尝试以下

<input type="text" id="email"/>

Here is the fiddle

如果为空，表单提交不会显示错误消息

2 个答案: