jQuery: Formularübergabe verhindern, wenn das Feld vor dem Senden leer ist

Question

Ich habe gerade angefangen, jQuery zu lernen und liebe es schon, aber meine Fähigkeiten reichen noch nicht aus, um dieses wahrscheinlich einfache Problem für meine Arbeit zu lösen: Ich habe 3 verschiedene Formen mit einem Eingabefeld sofort durch Submit-Button gefolgt:

ich mag Formularübermittlung verhindern, wenn das Texteingabefeld oder das Textfeld vor der Submit-Button leer.

$(function() { 
     $(':submit').click(function(e) { 
       $(':text').each(function() { 
         if ($(this).val().length == 0) { 
           $(this).css('border', '2px solid red'); 
         } 
       }); 
       e.preventDefault(); 
     }); 
}); 

Aber es hat folgende Probleme: Ich habe einen Ausschnitt aus der jQuery Ninja book gestohlen

1. Es das Textfeld in der letzten Form ignoriert, weil $(':text').each() nicht darauf
gilt
2. Es spielt keine 't erlaube das Einreichen eines Formulars - Ich denke, ich muss preventDefault() unter einem "if" verschieben
3. Ich sollte wahrscheinlich besser prev() statt each()
verwenden
4. Wenn der Benutzer ihre Meinung ändert und klickt auf eine andere Form, sollte die bisherige Form

mich Könnte bitte gelöscht jemand helfen? Alex

UPDATE:

Ich habe versucht:

$(function() { 
     $(':submit').click(function(e) { 
       $(this).prev(function() { 
         if ($(this).val().length < 2) { 
           // would be good to clear border for 
           // each text and textarea here... 
           $(this).css('border', '2px solid red'); 
           e.preventDefault(); 
         } 
       }); 
     }); 
}); 

aber leider 2 Warnungen erhalten:

Warning: Unexpected token in attribute selector: '!'. 
Warning: Unknown pseudo-class or pseudo-element 'submit'. 

und die rote Grenze erscheint nicht und das Formular gesendet, wenn auf eine Schaltfläche geklickt wird.

Auch habe ich versucht:

$(function() { 
     $('form').submit(function(e) { 
       $(':text, textarea').each(function() { 
         if ($(this).val().length < 2) { 
           $(this).css('border', '2px solid red'); 
           e.preventDefault(); 
         } 
       }); 
     }); 
}); 

aber die Form ist nie vorgelegt und alle drei Textfelder rot statt nur einem.

Answer 1

<script type="text/javascript" src="/jquery-1.4.4.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     $(':submit').click(function(e) { 
       $(':text, textarea').each(function() { 
         if ($(this).val().length == 0) { 
           $(this).css('border', '2px solid red'); 
           e.preventDefault(); 
         } 
       }); 
     }); 
}); 
</script> 

Sie werden wahrscheinlich mit .each() :)

Answer 2

1. Da (':text') is equivalent to $('[type=text]') so dass es nicht enthalten Textarea in Ordnung sein. Wechseln Sie zu $(':text, textarea').
2. Correct

3. Nein, prev nicht Schleife über die Sammlung, tut each. (prev wählt das vorherige Geschwister des aktuellen Elements)

4. Schauen Sie sich http://bassistance.de/jquery-plugins/jquery-plugin-validation/ an, es ist ein großartiges Validierungs-Plugin.

Answer 3

-Code für Klick, und geben Sie die Taste

$(":input").bind("click keypress", function (evt) { 

    var keyCode = evt.which || evt.keyCode; 
    var sender = evt.target; 
    if (keyCode == 13 || sender.type == "submit") { 
     evt.preventDefault(); 

     //add your validations here 
    } 

vorlegen und das Formular abschicken.