Ajax überprüfung ob Feld leer ist

html.de-Forum JavaScript
1

Guten Morgen,

Habe ein Formular dass ich per ajax absende

jQuery('#senden').click(function (e) {
        e.preventDefault();
        jQuery.ajax({
            url: '../nachricht.php',
            type: 'POST',
            data: {
                nachricht: jQuery('#kontakt_nachricht').val(),
                email: jQuery('#kontakt_email').val()
            },
            success: jQuery(function () {
                jQuery('#dialog-modal').dialog({
                    modal: true,
                    open: function(){
                        setTimeout("jQuery('#dialog-modal').dialog('close')",5000);
                    }
                });
                jQuery('#dialog-modal').html('<h1>Vielen Dank,</h1><br /><p>Sie erhalten umgehend eine Antwort von uns</p>');
            })
        });
    });

Hab mir gedacht dass ich bei meinen input feldern einfach ein required ransetze (HTML5) das würde ja alles übernehmen. Klappt aber nicht. Formular wird dennoch direkt abgeschickt und success Meldung kommt.
Nun würde ich das ganze über jQuery machen, jedoch weiß ich nicht so recht wo ich die Abfrage, ob ein Feld leer ist einbauen soll.

Sähe dann so aus:

if (jQuery('#inputfeld').val() == '') {
     jQuery(this).css('border','1px solid red');
}

Logischerweise soll es vor dem success von ajax passieren was es dann auch verhindert.
Hat jemand ne Idee?

lg

2

Ich würde es in den beforesend Handler von $.ajax() schreiben, und unter die CSS-Zuweisung muss dann natürlich ein return false. Außerdem noch ein separates Event, welches beim Klick in ein Input-Feld den roten Rahmen wieder entfernt.

Nebenbei: Die HTML5-Formvalidierung würde den Versand per HTML unterdrücken. Aber das schaltest du ja mit preventDefault() ab, um statt dessen Ajax zu verwenden.

3

Ok habe ich nun gemacht

jQuery('#senden').click(function (e) {
        e.preventDefault();
        jQuery.ajax({
            url: '../nachricht.php',
            type: 'POST',
            data: {
                nachricht: jQuery('#kontakt_nachricht').val(),
                email: jQuery('#kontakt_email').val()
            },
            beforeSend: function() {
                if ((jQuery('#kontakt_nachricht').val() = "") || (jQuery('#kontakt_email').val() == "")) {
                    jQuery(this).css('border','1px solid red');
                }
                return false
            },
            success: jQuery(function () {
                jQuery('#dialog-modal').dialog({
                    modal: true,
                    open: function(){
                        setTimeout("jQuery('#dialog-modal').dialog('close')",5000);
                    }
                });
                jQuery('#dialog-modal').html('<h1>Vielen Dank,</h1><br /><p>Sie werden umgehend eine Antwort von unserem Mitarbeiter erhalten.<p style="float:right; padding-top:150px;">Ihr Carcierge-Team</p>');
            })
        });
    });

Kriege beim absenden des Formulars folgenden Fehler:

Invalid left-hand side in assignment
Klingt für mich so als wäre was bei der If-Abfrage falsch mit val() = „“ ?

4

Klingt für mich so als wäre was bei der If-Abfrage falsch mit val() = „“ ?

Zuweisungsoperator != Gleichheitsoperator :wink:

Außerdem sollte das return false in die Abfrage. Ansonsten steigt die Funktion nach beforesend aus.

5

Danke, die Zuweisung war falsch.
Ist jetzt korrigiert, kriege auch keine Fehlermeldung mehr beim abschicken.
Blöderweise kommt es jetzt immernoch zur success Meldung.
Hier der aktuelle Code:

jQuery('#senden').click(function (e) {
        e.preventDefault();
        jQuery.ajax({
            url: '../nachricht.php',
            type: 'POST',
            data: {
                nachricht: jQuery('#kontakt_nachricht').val(),
                email: jQuery('#kontakt_email').val()
            },
            beforeSend: function() {
                if ((jQuery('#kontakt_nachricht').html() == "") || (jQuery('#kontakt_email').val() == "")) {
                    jQuery(this).css('border','1px solid red');
                    return false;
                }
            },
            success: jQuery(function () {
                jQuery('#dialog-modal').dialog({
                    modal: true,
                    open: function(){
                        setTimeout("jQuery('#dialog-modal').dialog('close')",5000);
                    }
                });
                jQuery('#dialog-modal').html('<h1>Vielen Dank,</h1><br /><p>Sie werden umgehend eine Antwort von unserem Mitarbeiter erhalten.<p style="float:right; padding-top:150px;">Ihr Carcierge-Team</p>');
            })
        });
    });

Das return false ist jetzt auch in der Abfrage drin. Das eine ist ein daher das .html und nicht .val
Die If-Abfrage scheint nicht zu greifen hmm.
Jemand ne Idee?

6

Was passiert denn, wenn du nur return false mit beforesend übergibst?

Ansonsten löst man solche Probleme durch Vereinfachung. Mal jQuery(‚#kontakt_nachricht‘).val() in die Konsole eingeben und sich das Ergebnis anschauen, die Abfrage in: var foo = ‚foo‘ != ''bar ? true : false; console.log(foo); umbauen, etc. …

7

Also bei

beforeSend: function() {return false;},

Kommt es immernoch zur success Meldung.

Hab auch mal jQuery(‚#kontakt_nachricht‘).val() in die konsole eingegeben da kommt als ergebnis „“ raus. Stimmt also alles.
Wundert mich dass es trotz return false weitergeht zum success.

8

Kann ich dir auf Anhieb auch nicht erklären. Das müsste ich selber nachbauen und im Zweifelsfall eben googeln.

Oder baue das doch einfach um, ohne beforeSend.

ungetestet:

$('#senden').click(function (e) { e.preventDefault(); if ( $('#kontakt_nachricht').html() != "" && $('#kontakt_email').val() != "" ) { // Ajax Call } else { // CSS border } })

9

Das ist ne gute Idee. Bin aber nun hinter meinen Fehler gekommen. Lag daran dass ich bei success die function mit jQuery aufgerufen habe. Also jQuery(function() anstatt nur function()
Leider wird der Border bei this nicht vergeben sondern halt nur wenn ich konkret angebe welches input den Border kriegen soll. Gäbe es da ne möglichkeit nur dem input den Border zu geben dass leer ist?

beforeSend: function() {
                if ((jQuery('#kontakt_nachricht').val() == "") || (jQuery('#kontakt_email').val() == "")) {
                    jQuery('#kontakt_nachricht').css('border','1px solid red');
                    return false;
                }
            },
10

Ich sitze gerade nicht am Rechner , aber wenn du statt der Abfrage über beide Selektoren mit each() iterierst, sollte $(this) funktionieren.

11

Meinst du quasi

if(jQuery(‚input‘).each.val() == „“)

Weil die Struktur meines Formulars sieht folgendermaßen aus:

<form action="../nachricht.php" method="post">
   <textarea  name="nachricht" placeholder="Ihre Nachricht an uns" id="kontakt_nachricht"></textarea><br>
   <input id="kontakt_email" type="text" name="email" placeholder="Ihre Email">
   <input id="senden" type="submit" value="senden">
</form>

Verstehe das mit .each nicht so richtig :S

12

Verstehe das mit .each nicht so richtig :S

Dann lernen? :slight_smile:

each() ist das Äquivalent zu for-in in JS und foreach in PHP. Es iteriert über ein Array oder Objekt und liefert bedarfsweise index und value zurück. In jQuery gibt es dafür sogar zwei Funktionen: $(‚foo‘).each() und $.each(). Näheres steht in der Doku.

Pattern (ungetestet):

$('input').each(function() { if ($(this).val = "") { $(this).css('border', '1px red solid'); } })