2013-07-25 32 views
11

Die Lösung sollte ziemlich einfach sein. Ich versuche zu verhindern, dass das Formular ordnungsgemäß übermittelt wird, wenn in den Eingabefeldern kein Wert gefunden wird. Hier ist mein JSFiddle: http://jsfiddle.net/nArYa/7/Verwenden von jQuery, um das Senden von Formularen zu verhindern, wenn die Eingabefelder leer sind

// Markup

<form action="" method="post" name="form" id="form"> 
<input type="text" placeholder="Your email*" name="email" id="email"> 
<input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name" 
<button type="submit" id="signup" value="Sign me up!">Sign Up</button> 
</form> 

// jQuery

if ($.trim($("#email, #user_name").val()) === "") { 
    $('#form').submit(function(e) { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
    }) 
} 

Wie Sie im JSFiddle sehen können, das Problem ist, dass, wenn ich schreibe etwas in beide Felder, die Alarmbox STILL erscheint. Es fällt mir schwer herauszufinden, warum. Ist etwas falsch in meinem if ($. Trim ($ "# E-Mail, #Benutzername"). Val()) === "")?

+1

Ja, Sie sollten jede von ihnen einzeln überprüfen, wenn Sie nur einen Selektor verwenden, nur ein Wert –

+1

Aus der Dokumentation zurückgegeben werden: den aktuellen Wert des Get ** zuerst ** Element in der Menge der passenden Elemente – Barmar

+1

Sie müssen eine JavaScript-Funktion an Ihre Absenden-Schaltfläche anhängen. Die Funktion gibt false zurück, wenn die Felder nicht gültig sind. – chadiusvt

Antwort

23

Zwei Dinge, # 1 die Prüfung auf leere Felder auf jedem Versuch einreichen passieren sollte, # 2 Sie müssen jedes Feld einzeln

überprüfen
$('#form').submit(function() { 
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") { 
     alert('you did not fill out one of the fields'); 
     return false; 
    } 
}); 

Updated fiddle

+0

Es funktioniert direkt Code implementieren if ($ .trim ($ ("# email"). Val()) === "" || $ .trim ($ ("# Benutzername").val()) === "") { alert ('Sie haben eines der Felder nicht ausgefüllt'); Rückgabe false; } – gnganpath

5

Ihre Überprüfung erfolgt beim Laden der Seite. Sie müssen das Feld überprüfen, wenn das Formular gesendet wird.

$('#form').submit(function(e) { 
    if ($.trim($("#email, #user_name").val()) === "") { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
    } 
}); 
1

Setzen Sie Ihr if-Anweisung innerhalb des Rückrufs:

$('#form').submit(function(e) { 
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
     //You can return false here as well 
    } 
}); 
+0

Dies ist nicht die richtige Antwort, wird auch wenn der Benutzername leer ist senden –

2

Ich denke, dass dies helfen:

$('#form').submit(function(e) { 
    e.preventDefault(); 
    $("#email, #user_name").each(function(){ 
     if($.trim(this.value) == ""){ 
      alert('you did not fill out one of the fields'); 
     } else { 
      // Submit 
     } 
    }) 
}) 
2

HTML5: erforderlich in input-Tag

  • Ein boolean-Attribut verwenden.

  • Das Eingabefeld muss ausgefüllt werden, bevor das Formular ausgefüllt wird.

  • Funktioniert mit Text, Suche, URL, Telefon, E-Mail, Passwort, Datumsauswahl, Nummer, Kontrollkästchen, Radio und Datei.

    <input required type='text'...> 
    

w3schools hint

+1

Wie wäre es nur mit Leerzeichen? Ich habe das nur benutzt aber es reicht immer noch bei der Eingabe von Leerzeichen in die Eingabefelder. –

+1

Dann können Sie das Attribut Muster zusammen mit erforderlich verwenden. http://www.felgall.com/html5r.htm wird Ihnen helfen. (nicht von Safari-Browser unterstützt) – Elnaz

Verwandte Themen