我正在调用一个JavaScriptDOM按钮单击事件来执行一些代码。然而，我首先需要验证文本框中是否有值。NET的RequiredFieldValidator控件来验证文本框。它的工作原理是，当文本框为空时，它将显示一条错误消息，然而，相关的JavaScript按钮单击事件仍然会触发。
当我使用ASP时，如何防止JavaScript函数被激发。NET验证控制？
顺便说一句，我知道我可以在JavaScript中使用验证，但我希望不要这样做，只使用ASP。NET验证控件。
这是我的代码(这正是去除所有绒毛后的使用方法(：
<%@ Page Language="VB" blah... %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="MyButton" runat="server" Text="Click Me" />
<asp:TextBox runat="server" ID="MyTextBox"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="MyRequiredFieldValidator" ControlToValidate="MyTextBox" Display="Dynamic" Text="*" ErrorMessage="The field is required.">
Required
</asp:RequiredFieldValidator>
</form>
<script type="text/javascript">
$(document).ready(function () {
const vMYBUTTON = document.querySelector('#MyButton');
SomeKindOfPluginObject.dom.addEvent(vMYBUTTON, 'click', function () {
console.log('Function started.');
console.log('My code executed.');
console.log('Function ended.');
event.preventDefault();
});
});
</script>
</body>
</html>
问题是表单提交是一个点击事件，它与按钮点击事件是分开的。
这两个事件一个接一个地进入队列。
提交表单时，服务器返回所需的字段错误，然后处理下一个单击事件，该事件恰好是您不想被调用的JavaScript。
服务器将需要呈现一个没有脚本的页面，直到没有错误
<!DOCTYPE html>
<html lang="en">
<head runat="server"></head>
<body>
<!-- /////////////////////////////////////////////////////////////
// Both the button click, and the JavaScript click events are
// triggerd when the form returns an error
///////////////////////////////////////////////////////////////-->
<form id="form1" runat="server">
<!-- /////////////////////////////////////////////////////////////
// When this button is clicked, it fires its own click event
///////////////////////////////////////////////////////////////-->
<asp:Button ID="MyButton" runat="server" Text="Click Me" />
<asp:TextBox runat="server" ID="MyTextBox"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="MyRequiredFieldValidator" ControlToValidate="MyTextBox" Display="Dynamic" Text="*" ErrorMessage="The field is required.">
Required
</asp:RequiredFieldValidator>
</form>
<script type="text/javascript">
$(document).ready(function() {
const vMYBUTTON = document.querySelector('#MyButton');
/////////////////////////////////////////////////////////////
// This event will fire because it is an
// additional click event that you are adding
/////////////////////////////////////////////////////////////
SomeKindOfPluginObject.dom.addEvent(vMYBUTTON, 'click', function() {
console.log('Function started.');
console.log('My code executed.');
console.log('Function ended.');
event.preventDefault();
});
});
</script>
</body>
</html>
您可以通过添加一个变量来跟踪表单的状态，从而简单地控制行为
///////////////////////////////////////////////////////////////
// This event will be ignored until the server returns success
///////////////////////////////////////////////////////////////
SomeKindOfPluginObject.dom.addEvent(vMYBUTTON, 'click', function() {
if (someVariableSetOnTheServer == "invalid form") {
return;
}
console.log('Function started.');
console.log('My code executed.');
console.log('Function ended.');
event.preventDefault();
});
另一种方法是使用。NET JavaScript API仅在Page_ClientValidate()返回true时运行代码
if (Page_ClientValidate()) {
// run your code here
}