javascript - Hur man förhindrar att ett formulär skickas?

Jag har ett formulär som har en skicka-knapp någonstans i det.

Jag skulle dock vilja på något sätt 'fånga' submit-händelsen och förhindra att den inträffar.

Finns det något sätt jag kan göra detta på?

Jag kan inte ändra på skicka-knappen, eftersom den är en del av en anpassad kontroll.

Svar #1

Till skillnad från de andra svaren är return false endast del av svaret. Tänk på scenariot där ett JS-fel inträffar innan return-satsen...

html

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

skript

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

Att returnera false här kommer inte att köras och formuläret kommer att skickas ändå. Du bör också anropa preventDefault för att förhindra standardformulärets åtgärd vid Ajax-formulärsändningar.

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

I det här fallet kommer formuläret inte att skickas även med buggen!

Alternativt kan en try...catch-block användas.

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

Svar #2

Du kan använda inline-händelsen onsubmit så här

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

Eller

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

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

Demo

Nu kanske detta inte är en bra idé när man gör stora projekt. Du kan behöva använda händelselyssnare.

Vänligen läs mer om Inline Events vs Event Listeners (addEventListener och IEs attachEvent) här. För jag kan inte förklara det mer än vad Chris Baker gjorde.

Båda är korrekta, men ingen av dem är ”bäst” i sig, och det kan finnas en anledning till att utvecklaren valde att använda båda tillvägagångssätten.

Svar #3

Fäst en händelselyssnare på formuläret med hjälp av .addEventListener() och anropa sedan .preventDefault()-metoden på 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>

Jag tycker att det är en bättre lösning än att definiera en submit-händelsehanterare direkt i onsubmit-attributet eftersom det separerar webbsidans logik och struktur. Det är mycket lättare att underhålla ett projekt där logiken är separerad från HTML. Se: Opåträngande JavaScript.

Att använda .onsubmit-egenskapen hos form-DOM-objektet är inte en bra idé eftersom det hindrar dig från att koppla flera submit-callbacks till ett element. Se addEventListener vs onclick.

Svar #4

Följande fungerar för närvarande (testat i Chrome och Firefox):

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

där validateMyForm() är en funktion som returnerar false om validering misslyckas. Den viktigaste punkten är att använda namnet event. Vi kan inte använda t.ex. e.preventDefault()

Svar #5

Prova den här...

HTML-kod

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

jQuery-kod

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

eller

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

Svar #6

För att förhindra att formuläret skickas behöver du bara göra detta.

<form onsubmit="event.preventDefault()">
    .....
</form>

Genom att använda ovanstående kod kommer detta att förhindra att ditt formulär skickas.

Relaterade artiklar