Como cancelo o envio do formulário no evento onclick do botão submit?

Estou trabalhando em um aplicativo da web ASP.net.

Eu tenho um formulário com um botão de envio. O código para o botão de envio é semelhante a <input type='submit' value='submit request' onclick='btnClick();'>.

Quero escrever algo como o seguinte:

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

Como eu faço isso?

Você está melhor fazendo ...

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

Se isValidForm()retornar false, seu formulário não foi enviado.

Você provavelmente também deve mover seu manipulador de eventos embutido.

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

Altere sua entrada para o seguinte:

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

E retornar falso em sua função

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

Você precisa mudar

onclick='btnClick();'

para

onclick='return btnClick();'

e

cancelFormSubmission();

para

return false;

Dito isso, eu tentaria evitar os atributos de evento intrínsecos em favor de JS discreto com uma biblioteca (como YUI ou jQuery) que tem uma boa API de manipulação de eventos e se conecta ao evento que realmente importa (ou seja, o evento de envio do formulário em vez do evento de clique do botão).

Às vezes onsubmit, não funcionaria com asp.net.

Resolvi de maneira muito fácil.

se tivermos tal formulário

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

Agora você pode capturar get esse evento antes do postback do formulário e interrompê-lo no postback e fazer todo o ajax que quiser usando este jquery.

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

você deve alterar o tipo de submitpara button:

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

ao invés de

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

você então obtém o nome do seu botão em javascript e associa a ação que você deseja

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

funcionou para mim espero que ajude.

Você precisa return false;:

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

function btnClick() {
    return validData();
}

Por que não alterar o botão de envio para um botão normal e, no evento de clique, enviar seu formulário se ele passar nos testes de validação?

por exemplo

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

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

Você precisa onSubmit. Não onClickde outra forma alguém pode simplesmente pressione enter e ele irá ignorar a sua validação. Quanto ao cancelamento. você precisa retornar falso. Aqui está o código:

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

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

Editar onSubmit pertence à tag do formulário.

É simples, basta retornar falso;

O código abaixo vai dentro do onclick do botão submit usando jquery ..

if(conditionsNotmet)
{
return false;
}

usar onclick='return btnClick();'

e

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

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

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

Com JQuery é ainda mais simples: funciona em Asp.Net MVC e Asp.Core

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

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