Stop Seite von Neuladen bei fehlgeschlagener Validierung

Question

Ich habe zur Zeit arbeiten JavaScript-Validierung, so dass das Formular nicht vorgelegt werden, ohne mindestens ein Kontrollkästchen ausgewählt wird. Es wird eine Nachricht an den Benutzer gesendet, um sicherzustellen, dass mindestens ein Benutzer ausgewählt wird.

Was ich jetzt tun möchte, ist das Formular zu stoppen, etwas anderes zu tun, es scheint, die Seite neu zu laden, nachdem ich auf den Absenden-Knopf geklickt habe, und es wäre vorzuziehen, wenn es das nicht getan hätte.

MY aktuellen Code ist wie folgt:

Form:

<form name="frm_multi_message_form" id="multi_message_form" style="margin-bottom: 0px;" method="post"><button style="border-style: none; margin: 5px 0 5px 0;" type="submit" action="" onClick="checkForm(this);" >Message multiple sitters</button> 
    </form> 

Mein Javascript:

function checkForm(form) 
     { 

    if (document.querySelector('form[id="multi_message_form"] input[name="username[]"]:checked')) { 
      document.frm_multi_message_form.action = "http://example.com/another-page/"; 
      document.frm_multi_message_form.submit(); 
     } else { 
      alert("You must select at least one sitter to message"); 

     } 
    return false; 
     } 

Ich warf die Warnung nicht ein Problem haben, und das Formular abschickt, Ich würde gerne wissen, wie preventDefault (oder ist das nicht in einer JavaScript-Abfrage ??) ausgelöst werden, wenn ich könnte, so nichts passierte anders als der Fehler angezeigt wird.

Answer 1

sollten Sie verwenden onClick="return checkForm(this);" und Ihre Form wird nicht bei Validierungsfehler vorgelegt werden

Answer 2

Sie benötigen einen Event-Handler auf dem Formular Vorlage das Standardverhalten (Vorlage) zu verhindern:

document.getElementById('multi_message_form').addEventListener('submit', function(evt) { 
    evt.preventDefault(); 
}) 

Answer 3

verwenden „return false“ nach der Validierung wie

$("#formId").submit(function() 
{ 
if(someField == "") 
{ 
$("#divId").text 
return false; 
} 
}