送信ボタンのonclickイベントでフォームの送信をキャンセルするにはどうすればよいですか？

ASP.net Webアプリケーションに取り組んでいます。

送信ボタン付きのフォームがあります。送信ボタンのコードはのようになります<input type='submit' value='submit request' onclick='btnClick();'>。

私は次のようなものを書きたいです：

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

どうすればよいですか？

あなたはやっておく方が良いです...

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

がisValidForm()返された場合false、フォームは送信されません。

また、イベントハンドラーをインラインから移動する必要があります。

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

入力を次のように変更します。

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

関数でfalseを返します

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

変える必要がある

onclick='btnClick();'

に

onclick='return btnClick();'

そして

cancelFormSubmission();

に

return false;

そうは言っても、優れたイベント処理APIを備えたライブラリ（YUIやjQueryなど）を備えた控えめなJSを優先して、本質的なイベント属性を回避し、本当に重要なイベント（つまり、フォームの送信イベント）に結び付けようと思いますボタンのクリックイベント）。

onsubmitasp.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>

これで、フォームポストバックの前にそのイベントを取得してキャッチし、ポストバックを停止して、このjqueryを使用して必要なすべてのajaxを実行できます。

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

タイプをからsubmitに変更する必要がありますbutton：

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

の代わりに

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

次に、JavaScriptでボタンの名前を取得し、それに必要なアクションを関連付けます

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

それが役に立てば幸いです。

あなたはする必要がありますreturn false;：

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

function btnClick() {
    return validData();
}

送信ボタンを通常のボタンに変更し、クリックテストで、検証テストに合格したフォームを送信してみませんか？

例えば

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

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 

あなたが必要onSubmitです。それonClick以外の場合は、Enterキーを押すだけで検証がバイパスされます。キャンセルも。falseを返す必要があります。これがコードです：

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

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

編集 onSubmitはformタグに属しています。

これは単純で、単にfalseを返します。

以下のコードは、jqueryを使用して送信ボタンのonclick内に配置されます。

if(conditionsNotmet)
{
return false;
}

使用する onclick='return btnClick();'

そして

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

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

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

JQueryを使用するとさらに簡単です：Asp.Net MVCおよびAsp.Coreで動作します

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

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