¿Cómo cancelo el envío del formulario en el evento al hacer clic en el botón Enviar?

Estoy trabajando en una aplicación web ASP.net.

Tengo un formulario con un botón de envío. El código del botón de enviar se parece a <input type='submit' value='submit request' onclick='btnClick();'>.

Quiero escribir algo como lo siguiente:

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

¿Cómo hago esto?

Es mejor que hagas ...

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

Si isValidForm()regresa false, entonces su formulario no se envía.

Probablemente también debería mover su controlador de eventos desde en línea.

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

Cambie su entrada a esto:

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

Y devuelve falso en tu función

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

Necesitas cambiar

onclick='btnClick();'

a

onclick='return btnClick();'

y

cancelFormSubmission();

a

return false;

Dicho esto, trataría de evitar los atributos de evento intrínsecos a favor de JS discreto con una biblioteca (como YUI o jQuery) que tenga una buena API de manejo de eventos y se vincule con el evento que realmente importa (es decir, el evento de envío del formulario en su lugar del evento de clic del botón).

A veces onsubmitno funcionaría con asp.net.

Lo resolví de manera muy fácil.

si tenemos tal forma

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

Ahora puede obtener ese evento antes de la devolución del formulario y detener la devolución y hacer todo el ajax que desee con este jquery.

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

debe cambiar el tipo de submita button:

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

en vez de

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

luego obtiene el nombre de su botón en javascript y asocia la acción que desee

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

funcionó para mí espero que ayude.

Necesitas return false;:

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

function btnClick() {
    return validData();
}

¿Por qué no cambiar el botón de enviar por un botón normal y, en el evento de clic, enviar su formulario si pasa las pruebas de validación?

p.ej

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

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

Necesitas onSubmit. De lo onClickcontrario, alguien puede simplemente presionar enter y omitirá su validación. En cuanto a cancelar. debe devolver falso. Aquí está el código:

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

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

Editar onSubmit pertenece a la etiqueta de formulario.

Es simple, solo devuelve falso;

El siguiente código va dentro del clic del botón enviar usando jquery.

if(conditionsNotmet)
{
return false;
}

utilizar onclick='return btnClick();'

y

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

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

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

Con JQuery es aún más simple: funciona en Asp.Net MVC y Asp.Core

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

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