javascript - validacion - ¿Cómo evitar que se envíe el formulario?

validar nombre javascript

Question

Tengo un formulario que tiene un botón de enviar en alguna parte.

Sin embargo, me gustaría ''atrapar'' el evento de envío y evitar que ocurra.

¿Hay alguna manera de que pueda hacer esto?

No puedo modificar el botón Enviar porque es parte de un control personalizado.

Answer 1

Adjunte un detector de eventos al formulario usando .addEventListener() y luego llame al método .preventDefault() en el event :

const element = document.querySelector(''form'');
element.addEventListener(''submit'', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log(''Form submission cancelled.'');
});

<form>
  <button type="submit">Submit</button>
</form>

Creo que es una mejor solución que definir un controlador de eventos submit línea con el atributo onsubmit porque separa la lógica y la estructura de la página web. Es mucho más fácil mantener un proyecto donde la lógica está separada de HTML. Ver: JavaScript discreto .

Usar la propiedad .onsubmit del objeto DOM de form no es una buena idea porque le impide adjuntar varias devoluciones de llamada de envío a un elemento. Ver addEventListener vs onclick .

Answer 2

Los siguientes trabajos funcionan a partir de ahora (probados en Chrome y Firefox):

<form onsubmit="event.preventDefault(); return validateMyForm();">

donde validateMyForm () es una función que devuelve false si falla la validación. El punto clave es usar el event nombre. No podemos usar, por ejemplo, e.preventDefault()

Answer 3

Para seguir convenciones de programación JavaScript discretas , y dependiendo de qué tan rápido se cargue DOM , puede ser una buena idea usar lo siguiente:

<form onsubmit="return false;"></form>

Luego conecte los eventos usando la carga o DOM listo si está usando una biblioteca.

$(function() {
    var $form = $(''#my-form'');
    $form.removeAttr(''onsubmit'');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children(''input[type="text"]'').each(function(){
            if($(this).val().length == 0) {
                alert(''You are missing a field'');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

Además, siempre usaría el atributo de action ya que algunas personas pueden tener algún complemento como NoScript ejecución, lo que rompería la validación. Si está utilizando el atributo de acción, al menos el servidor redirigirá a su usuario en función de la validación de back-end. Si está utilizando algo como window.location , por otro lado, las cosas serán malas.

Answer 4

Prueba este ...

código HTML

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

Código jQuery

$(function(){
    $(''.submit'').on(''submit'',function(event){
        event.preventDefault() ;
        alert("Form Submission stoped.");
    });
});

o

$(function(){
    $(''.submit'').on(''submit'',function(event){
       event.preventDefault() ;
       event.stopPropagation();
       alert("Form Submission prevented / stoped.");
    });
});

Answer 5

Puede usar un evento en línea en onSubmit como este

<form onsubmit="alert(''stop submit''); return false;" >

O

<script>
   function toSubmit(){
      alert(''I will not submit'');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Demo

Ahora bien, esta puede no ser una buena idea al hacer grandes proyectos. Es posible que necesite usar Event Listeners.

Lea más sobre Inline Events vs Event Listeners (addEventListener y IE''s attachEvent) aquí . Porque no puedo explicarlo más de lo que lo hizo Chris Baker .

Ambos son correctos, pero ninguno de ellos es "lo mejor" per se, y puede haber una razón por la que el desarrollador eligió usar ambos enfoques.

Answer 6

A diferencia de las otras respuestas, devolver false es solo una parte de la respuesta. Considere el escenario en el que se produce un error JS antes de la declaración de devolución ...

html

<form onsubmit="return mySubmitFunction()">
  ...
</form>

guión

function mySubmitFunction()
{
  someBug()
  return false;
}

regresar false aquí no se ejecutará y el formulario será enviado de cualquier manera. También debe llamar a preventDefault para evitar la acción de formulario predeterminada para envíos de formularios Ajax.

function mySubmitFunction(evt) {
  evt.preventDefault();
  someBug();
  return false;
}

En este caso, incluso con el error, ¡el formulario no se enviará!

Alternativamente, un try...catch block podría ser usado.

function mySubmit(evt) { 
  evt.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Answer 7

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}