Kontaktformular: Speichern Button soll nur weiterleiten, wenn alle Felder ausgefüllt sind

Hallo, ich mache eine Kontaktformular, wenn man einen neuen Kontakt anlegt soll der Speichern Button aber nur auf die Startseite zurückverlinken wenn alle Felder korrekt ausgefüllt sind. Im Moment wird mir nur eine Fehlermeldung mit Window Alert angezeigt, aber dann trotzdem auf die Startseite zurückgeleitet.

Wie bekomme ich das hin, dass man bei einer Fehlermeldung auf der Seite bleibt?

Code:
function kontaktSpeichern() {
  

  
    var kontakt = new Kontakt();
    kontakt.name = document.querySelector("#nameID").value;
    kontakt.email = document.querySelector("#emailID").value;
    kontakt.plz = document.querySelector("#plzID").value;
    kontakt.ort = document.querySelector("#ortID").value;
    kontakt.strasse = document.querySelector("#strasseID").value;
  

  
  

    try {
        kontakt.pruefe();
    }
    catch(err) {
        window.alert(err.message);
    }
Button
Code:
 <a href="SuchDialog.html"><input class="button" type="submit" value="speichern" onclick="kontaktSpeichern()"></a>
Code:
pruefe() {
        if (this.name.trim() === "") {
            throw new Error("Der Name darf nicht leer sein!");
        } else if (this.email.trim() === "") {
            throw new Error("Die E-Mail-Adresse darf nicht leer sein!");
        } else if (this.plz.trim() === "") {
            throw new Error("Die Postleitzahl darf nicht leer sein!");
        } else if (this.ort.trim() === "") {
            throw new Error("Der Ort darf nicht leer sein!");
        } else if (this.strasse.trim() === "") {
            throw new Error("Die Strasse darf nicht leer sein!");
        } else {
            if (this.plz != parseInt(this.plz) || this.plz <= 0) {
                throw new Error("Die Postleitzahl muss eine Zahl > 0 sein!");
            } else if (!this.validateEmail(this.email)) {
                throw new Error("Die E-Mail-Adresse besitzt kein gültiges Format!");
            }
        }
    }
 
@Thallius Ein paar Anmerkungen bzw. Ideen:
  1. Ich mache kaum Web-Frontend, schon gar nicht mit Plain HTML/CSS (wenn ich da irgendwie drum rumkomme, bin ich der erste, der hier schreit ;)), JavaScript nur am Rande. Es wäre also durchaus möglich, dass es da bessere Möglichkeiten gibt.
  2. Es könnte auch ein einfaches "return false" funktionieren (das wurde/wird aber, glaub ich, nicht von allen Browsern unterstützt)
  3. JQuery braucht man heute kaum noch (querySelector/querySelectorAll).
  4. Man könnte evtl. auch einen normalen Button statt eines submit-Buttons nehmen und das Formular per Code submitten
 
Ich formuliere es mal anders: um eine Abhängigkeit einzuführen, brauche ich einen guten Grund. Mit querySelector(All), Arrow-Functions , fetch-API, Promises und Template Strings kommt man doch recht weit.
Den Vorteil an jquery finde ich gerade, dass man eine klar definierte Abhängigkeit eingeht. Man kann eine Version fest als .js hinzuladen und muss diese niemals updaten (wenn man nicht will). Ich sehe jquery mehr als praktische Funktionensammlung denn als Framework.

Ich mag die Syntax der Ajax Requests und das Drag&Drop, FadeIn/Out etc
 
Und ich bin der, der sonst pro Framework ist? Das wäre mir jetzt allerdings neu :)

Um zum Thema zurückzukommen: was ich meinte war, dass jQuery nicht mehr die Rolle spielt wie noch vor ein paar Jahren. Damals gehörte das schon zum "Lehrplan" angehender Webentwickler. Das würde ich heute nicht mehr sagen, weil vieles von dem, wofür jQuery eingesetzt wurde/wird, eben schon im Standard enthalten ist. So lange ich damit auskomme, sehe ich keinen Grund, was zusätzliches einzusetzen.
 
Passende Stellenanzeigen aus deiner Region:

Oben