Ankündigung

Einklappen
Keine Ankündigung bisher.

Absenden von Formularen per Enter verhindern ???

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Absenden von Formularen per Enter verhindern ???

    Sagt mal, gibt es einen sauberen Weg, das Absenden durch "Enter" oder mobil durch "öffnen" zu verhindern? Bisher hatte ich das absichtlich nicht unterbunden, aber bei Mobilgeräten ist dieses "öffnen" in der Bildschirmtastatur schon verlockend. Könnte auch ein Grund sein, warum bei mir immer mehr "halbe" Anfragen abgesendet werden.

    Bei meiner neuen Suche habe ich das per "readonly" gelöst, aber auch nur für den Datepicker, damit da gar keine Bildschirmtastatur kommt, aber was mache ich bei einem richtigen Formular? Gut, die Pflichtfelder verhindern es teilweise, aber leider sind gerade einige wichtige Felder keine Pflicht und sollen es auch nicht werden. Aus den ganzen Felder nun "readonly" zu machen und alles per Javascript zu lösen habe ich irgendwie auch nicht vor.

    Einer eine Idee?

    Danke und Gruß

    #2
    Beispiel für jQuery, um das Absenden bei Textfeldern im Formular zu unterbinden:

    Code:
     
     $(document).on('keyup keypress', 'form input[type="text"]', function(e) {   if(e.which == 13) {     e.preventDefault();     return false;   } });
    Ich habe eine zeitlang damit gearbeitet, inzw. aus UX Gründen wieder dagegen entschieden. Lieber per jQuery oder JS das Submit Event der form abfangen und da notfalls Prüfungen etc. rein.

    Kommentar


      #3
      Hi Chris, das ging ja schnell.

      dieses abfragen vom Keycode 13 gehört also noch zu den sauberen Wegen? Bin erstaunt, dachte da gibt es vielleicht schon was ganz anderes.

      Gut, Keycode. Stehe da aber gerade auf dem Schlauch, was Du meinst. Es geht ja so wie Du das da hast, also einen "Listener auf jedes Feld". Aber eben auch, einen "Listener auf den Submitbutton". Was meinst Du denn in dem Fall mit Prüfungen? Validierung der Dateneingabe? Bräuchte ich da gar nicht, das soll weiterhin PHP machen. Möglichkeit drei wäre aber auch noch, oder? Gar keinen echten Submitbutton haben, sondern einen normalen Button und die Form per JS zu senden.

      Welchen Weg findest Du denn besser, zeitgemäßer, eleganter?

      Einzige Aufgabe ist das Verhindern des Absendens. Alles andere macht PHP.

      Danke Dir!
      Zuletzt geändert von Synonym; 23.06.2016, 19:49. Grund: Typo: noch und nicht verwechselt

      Kommentar


        #4
        Eleganter ist die direkte Datenvalidierung per JS statt PHP. Denn dadurch spart sich der Nutzer das Neuladen mit dann folgender Fehlermeldung und es ist auch besser, als das Blockieren von Bedienelementen. Daher: Key nicht blockieren, sondern beim Submit Event validieren und eventuell Absenden verhindern und per JS rückfragen.

        Zum Codebeispiel: das kannst Du natürlich für ein spezifisches Feld (jQuery Selector) anpassen, ich hatte bei dem Formular tatsächlich nur ein Textfeld, hatte es nur so als Vormaßnahme für mögliche hinzukommende weitere Textfelder drin.

        Kommentar


          #5
          Hm, das mit der JS-Validierung muss ich mir überlegen, mag ich eigentlich nicht so, da ich auch mehrere Daten aus der DB brauche und so ja Ajax bedienen müsste. Aber davon ab, komme ich eigentlich bei form.addeventlistener('submit', function) an "which" ran? Bisher scheiterten alle Versuche, kommt immer "undefined".

          Ansonsten muss ich wohl doch einen Listener auf die Inputs legen. Wobei das bei "submit" ja dennoch wichtig wäre, wenn ich die Validierung mal per JS mache. Oder brauche ich da dennoch Listener auf Input?

          P.S. Habe 10 Felder. 2 sind Pflicht, der Rest ist eigentlich Voraussetzung, aber keine Pflicht, da es auch Kunden ohne die Angaben gibt.

          Kommentar


            #6
            Which dürfte für submit undefined sein, da es ja auf den input text und nicht den input submit ausgelöst war. Ich meinte: Enter zulassen und dann in der Validierung einfach sehen, ob das Absenden Sinn macht oder nicht und in letzterem Falle absenden verhindern und per JS mit Hinweis o.ä. reagieren.

            Kommentar


              #7
              Ach so. Das macht bei mir dann keinen Sinn bzw. das kann ich nicht validieren. Ich sage es mal so. Felder wie Anreise / Abreise sind keine Pflicht. 99% gegen sie an, aber es kann auch sein, dass das nicht angegeben wird und z.B. ein Zeitraum oder mehrere im Text erfragt werden (z.B. als "haben Sie 7 Tage irgendwann im August frei?"). Anzahl Personen / Erwachsene / Kinder / Hunde oder Emailadresse, selbst der Anfragetext. Alles freiwillig.

              Da kommt es dann leider manchmal vor, dass einer die Email eintippt und absendet. Dann zurück geht, Vielleicht die Personenanzahl eingibt und wieder absendet. Zulässig wäre das aber, denn Kinder, Hund und Text sind keine Pflicht. Validieren kann ich nur das, was da ist, das mache ich auch mit PHP derzeit, ob das Eingegebene gültig ist, Text Spam enthält, Email gültig ist, Personen nur Ziffern enthalten, Datum gültig ist etc. Oder Dinge wie Vergleiche mit DB, ob da schon mal das gleiche gesendet wurde und wann, etc.

              Wenn aber nichts in einem Feld ist, dann kann das "normal" sein, aber auch ein "Enter-Fehler".

              Das Einzige was ich per JS wirklich vorab validieren kann sind Name und Telefon, denn die sind Pflicht. Gut, alles andere auch, aber eben nur, wenn was im Feld steht. Oder hast Du einen Ansatz, wie man erkennen können sollte, "ob was Sinn macht", wenn man quasi frei entscheiden kann, was man angibt und was nicht?

              Kommentar


                #8
                So, habe das mal so umgesetzt, scheint auch zu funktionieren. Mobil muss ich aber noch testen. Wenn Du einen anderen Vorschlag hast, gerne :)

                Code:
                var form = document.getElementById('anfrage');
                var fields = (typeof document.querySelectorAll === 'function') ? form.querySelectorAll('input') : form.getElementsByTagName('input');
                [].forEach.call(fields, function(field) {
                  field.addEventListener('keyup', dontSubmit, false);
                  field.addEventListener('keypress', dontSubmit, false);
                });
                
                function dontSubmit(e)
                {
                    if(e.which == 13)
                    {
                        e.preventDefault();
                        return false;
                    }
                }

                Kommentar


                  #9
                  Also, muss das noch mal aus dem Keller holen. Mobile scheint teilweise nicht zu funktionieren. Eben wieder 5 Anfragen, weil ständig was fehlte. Und der UA war: "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36"

                  "Enter" scheint da also was anderes zu sein ...

                  Wobei ich das da so gar nicht verstehe, denn ich zwinge die Leute quasi per Readonly, den Datepicker zu nutzen. Direkte Eingaben in das Feld sind gar nicht möglich und eine Bildschirmtastatur sollte da eigentlich erst gar nicht erscheinen?!?

                  Kommentar


                    #10
                    Wahrscheinlich tab (Tabulator). Der hat mich beim Mobile Chrome vor kurzen tierisch genervt, weil er nicht tab-mäßig in den nächsten tabindex springt, sondern ein submit auslöst.

                    Kommentar


                      #11
                      Ah, danke. Gleich zwei Sachen auf einmal... Ehrlich gesagt wusste ich noch nicht mal, was das für ein Browser sein soll, die UAs werden immer wirrer irgendwie :( Tab kann ich dann ja mal versuchen, wobei ich auf den nie gekommen wäre, denn vor dem Feld und danach kommen ja noch weitere...

                      Kommentar

                      Lädt...
                      X

                      Das Rechtliche
                      Impressum | Widerruf | Datenschutz | Disclaimer |