Jak zapobiec wysyłaniu formularzy?

Możesz użyć zdarzenia inline onsubmit w ten sposób

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

Lub

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

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

Demo

Proszę przeczytaj więcej o Inline Events vs Event Listener (Addeventlistener i attachEvent IE) tutaj . Nie potrafię tego wyjaśnić bardziej niż Chris Baker.

Oba są poprawne, ale żaden z nich nie jest "najlepszy" per se, i nie może be powód, dla którego deweloper wybrał oba podejścia.

Dołącz detektor zdarzeń do formularza za pomocą .addEventListener() a potem zadzwoń do .preventDefault() metoda na 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>

Myślę, że jest to lepsze rozwiązanie niż zdefiniowanie obsługi zdarzeń submit inline z atrybutem onsubmit, ponieważ oddziela ona logikę i strukturę strony. O wiele łatwiej jest utrzymać projekt, w którym logika jest oddzielona od HTML. Zobacz: Dyskretny JavaScript .

Użycie właściwości .onsubmit obiektu form DOM jest nie jest to dobry pomysł, ponieważ uniemożliwia dołączanie wielu wywołań zwrotnych do jednego elementu. Zobacz addEventListener vs onclick .

Spróbuj tego...

Kod HTML

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

Kod JQuery

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

Lub

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

Poniższe działa od teraz (testowane w chrome i firefox):

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

Gdzie validateMyForm () jest funkcją, która zwraca false jeśli Walidacja nie powiedzie się. Kluczową kwestią jest użycie nazwy event. Nie możemy użyć np. e.preventDefault()

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

Aby postępować zgodnie z dyskretnymi konwencjami programowania JavaScript i w zależności od tego, jak szybko załaduje się DOM , dobrym pomysłem może być użycie:

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

Następnie połącz zdarzenia za pomocą onload lub DOM ready, jeśli używasz biblioteki.

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

Również zawsze używałbym atrybutu action, ponieważ niektórzy ludzie mogą mieć uruchomiony plugin NoScript, który następnie złamałby walidację. Jeśli używasz atrybut action, przynajmniej twój użytkownik zostanie przekierowany przez serwer na podstawie walidacji zaplecza. Jeśli używasz czegoś takiego jak window.location, z drugiej strony, rzeczy będą złe.