Verhinderung des Absendens eines Formulars, wenn die Validierung fehlgeschlagen ist, nachdem jedes Formularelement mit der Funktion .each() von jquery durchlaufen wurde

Question

Ich habe den folgenden Code, in dem ich versuche, über Html-Texteingabeelemente zu iterieren, eine Validierung durchzuführen und die Formularübermittlung zu verhindern, wenn die Validierung fehlschlägt:

$("#the_form").submit(function(){
                $(":text", this).each(function(){                    
                    if($(this).val().length != 0)
                    {                            
                        var str = $(this).val();
                        str = $.trim($(this).val());
                        $(this).val(str);
                        if($(this).val().length < 4)
                        {
                            alert("You should enter at least 4 characters");
                            $(this).focus();
                            return false;
                        }
                    }                 
                }) // end of each() function
                return true;            
            })

Wenn ich die Funktion .each() entferne und jedes Element einzeln ausführe (was offensichtlich kein sehr guter Ansatz ist), erhalte ich die gewünschten Ergebnisse. Wenn ich den Code jedoch so verwende, wie er ist, wird das Formular auch dann übermittelt, wenn der Benutzer nicht mindestens vier Zeichen eingegeben hat. Irgendwelche Ideen, was ich hier falsch machen könnte? Für jede Hilfe bin ich dankbar. Vielen Dank im Voraus.

Answer 1

Ihr return false; in der Rückruffunktion für $.each() (was dazu führt, dass sie bei dieser Iteration abbricht) und nicht von der submit Handler (der die Übermittlung des Formulars stoppen würde). Damit sollte es klappen:

$("#the_form").submit(function(){
    var isValid = true;
    $(":text", this).each(function(){                    
        if($(this).val().length != 0)
        {                            
            var str = $(this).val();
            str = $.trim($(this).val());
            $(this).val(str);
            if($(this).val().length < 4)
            {
                alert("You should enter at least 4 characters");
                $(this).focus();
                isValid = false;
                return false;
            }
        }                 
    }) // end of each() function
    return isValid;
})

Answer 2

Ganz einfach... Sie verhindern einfach die Voreinstellung des Ereignisses, wenn Sie wollen, dass es aufhört. Bitte geben Sie NICHT FALSE zurück. Wenn ein Ereignis false zurückgibt, ist das so, als würde man sagen: "Ich möchte, dass du scheiterst. Nicht nur, dass ich sicherstellen will, dass jeder nach mir registrierte Event-Handler nicht ausgeführt wird und kein Blubbern auftritt, weil irgendetwas schief gelaufen ist". Sie wollen "verhindern, dass die Aktion, die der Browser normalerweise ausführt, stattfindet".

$("#the_form").submit(function(e) {
  // LOGIC
  $(this).find(":text").each(function() {
      // OH NOES! We detected the form cannot be submitted.
      e.preventDefault();
      // More logic? maybe a shortcut exit.?
  });
});

Hinweis e.preventDefault() verhindert, dass Links zu ihrem href-Ziel gehen, verhindert die Übermittlung von Formularen, verhindert sogar, dass ein Change-Handler die Änderung zulässt (z.B. e.preventDefault() bei einem checkbox.change-Ereignis). Siehe http://api.jquery.com/event.preventDefault/

edit: Beachten Sie, dass dem Event-Handler immer das Event-Objekt als Parameter übergeben wird, in Ihrem Code haben Sie es einfach ignoriert. Lesen Sie sich die Funktion des Event-Handlers durch. Es gibt wirklich raffinierte Funktionen, die Sie mit Ereignissen in Jquery tun können, nicht ingore sie, wie sie sehr nützlich sind manchmal vor allem, wenn Sie einige Daten an den Handler erhalten müssen.