Javascript 如何在submit button onclick事件中取消表单提交？

我正在开发一个ASP.net web应用程序

我有一个带有提交按钮的表单。提交按钮的代码看起来像

我想写以下内容：

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

---

如何执行此操作？

使用

onclick='return btnClick（）；'

及

你需要改变

onclick='btnClick();'

到

及

到

这就是说，我会尽量避免使用具有良好事件处理API的库（如YUI或jQuery）的固有事件属性，并将其与真正重要的事件（即表单的提交事件而不是按钮的单击事件）联系起来。
将您的输入更改为：

<input type='submit' value='submit request' onclick='return btnClick();'>

为什么不将submit按钮更改为常规按钮，在click事件中，如果表单通过验证测试，则提交表单

e、 g


函数btnClick（）{
if（validData（））
document.myform.submit（）；
} 
您需要
提交
。不要单击
onClick
，否则某人只需按enter键，它将绕过您的验证。至于取消。您需要返回false。代码如下：

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}


函数btnClick（）{
如果（！validData（））返回false；
}

编辑提交属于表单标签。
您最好做

<form onsubmit="return isValidForm()" />

您需要
返回false：

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}


函数btnClick（）{
返回validData（）；
}
您应该将类型从
提交
更改为
按钮
：

<input type='button' value='submit request'>

为我工作
希望有帮助。
很简单，只需返回false

下面的代码位于使用jquery单击submit按钮的范围内

if(conditionsNotmet)
{
return false;
}

有时提交的
onsubmit
无法与asp.net一起使用

我用非常简单的方法解决了它

如果我们有这样的表格

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>


函数按钮单击（）{
//在此验证
document.getElementsByTagName（'form'）[0].submit（）；
}
使用JQuery更简单：在Asp.NETMVC和Asp.Core中工作

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>



$（'btnsupmit'）。在（'click'，函数（）{
如果（有效数据）{
返回true；//提交表单
}
否则{
return false；//取消提交
}
});
这是一条非常古老的线索，但肯定会引起注意。因此需要注意的是，所提供的解决方案不再是最新的，而现代Javascript要好得多

<script>
document.getElementById(id of the form).addEventListener(
    "submit",
    function(event)
    {
        if(validData() === false)
        {
            event.preventDefault();
        }
    },
    false
);


document.getElementById（表单的id）.addEventListener(
“提交”，
功能（事件）
{
if（validData（）==false）
{
event.preventDefault（）；
}
},
假的
);

表单接收监视提交的事件处理程序。如果调用的函数validData（此处未显示）返回FALSE，则调用PreventDefault方法，该方法将抑制表单的提交，浏览器将返回输入。否则，表格将照常发送

另外，这也适用于onsubmit属性。然后，匿名函数函数（event）{…}必须位于表单的onsubmit属性中。这并不是很现代，您只能使用一个事件处理程序进行提交。但您不必创建额外的javascript。此外，它可以直接在源代码中指定为表单的属性，无需等待表单集成到DOM中。
要使其正常工作，还需要做更多的工作。我试过让functino返回真或假，但似乎没有任何区别。他的答案是正确的。向上投票。您还必须在输入标记中返回它。另外，我宁愿使用
ev.preventDefault（）
或
ev.returnValue=false
来取消默认行为，但不阻止事件冒泡，以防其他控件在同一元素上观察到相同的事件。仅当您希望停止事件冒泡并取消默认操作时，才使用
return false
。请参阅。必须在事件处理程序本身中返回它，这是答案中缺少的最主要的信息。如果没有这一点，答案是不完整的，也没有足够的帮助值得投票。点击回车键将绕过检查。使用onSubmitThen如果JavaScript不可用，它将根本无法工作。在有效的东西上。按enter键将绕过检查。使用onsubmit使用onclick将允许用户按enter键并绕过检查。很好，但似乎每当我使用ASP.net时，
onsubmit
都无法正常工作，因为ASP.net会以自己的形式包装所有内容……您可以使用他的第二个建议。不管怎样，内联javascript是魔鬼。如果您使用的是ASP.NET web表单（提示：不要），那么不要尝试包含其他表单。它们完全不相容。我听说ASP.NET MVC允许您使用惯用标记构建web应用。@David，如果使用其他表单与ASP.NET web表单不兼容，那么我应该只使用服务器端控件吗？其他人的回答与您完全相同。我觉得这太巧合了。哎哟，这让我头疼。我有几个不同的
submit
输入。我想我会尝试使用此页面上的服务器端控件。可能重复的控件将不起作用。如果数据有效，则不返回true。使返回为真；在btnClick（）函数的末尾，要获得有用的答案，需要扩展此反应。解释为什么这是问题的答案。
<form onsubmit="return isValidForm()" />

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}

<input type='button' value='submit request'>

<input type='submit' value='submit request'>

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

if(conditionsNotmet)
{
return false;
}

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });

<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>

<script>
document.getElementById(id of the form).addEventListener(
    "submit",
    function(event)
    {
        if(validData() === false)
        {
            event.preventDefault();
        }
    },
    false
);