Website nur mit www und ohne http im Formular angeben

Wie macht ihr das mit Feldern in denen man eine Website angeben kann?

Seit HTML5 vergibt ja Contao automatisch den Input-Feldern das Attribut type="url" - das bewirkt bei jedweder Eingabe ohne http:// die Fehlermeldung: "Bitte geben Sie eine URL an."

Ich finde das nicht wirklich benutzerfreundlich.
Die meisten Leute übersehen die Fehlermeldung bzw. verstehen sie überhaupt nicht.
Warum reicht es nicht, wenn man eine Website mit www. eingibt?

Gibt es irgendeine Möglichkeit die Fehlermeldung anzupassen?

Klar, kann man dem Formularfeld zuweisen, dass es als Standardwert http:// hat, aber das ist dann für die Leute nervig, die gar keine Website angeben wollen
Denn diese Leute erhalten ja dann eine Fehlermeldung, wenn sie das Feld nicht weiter ausfüllen.

Einen Platzhalter à la "Bitte geben Sie eine Website mit http:// ein" wäre zwar auch eine Alternative, aber irgendwie so "Erklärbär" mäßig und deshalb nicht wirklich optimal.

Hallo,

Du könntest z.B mittels Javascript direkt während der Eingabe prüfen und entsprechende Hinweis- und Fehlermeldungen ausgeben.
Dann ist es für den User vielleicht verständlicher was er falsch macht.

Hab jetzt leider kein fertiges Snippet für dich, denke aber das es da genug Scripte zu gibt.

Da bin ich auch schon drübergestolpert.
Kann Contao halt nichts dafür und ich weiß auch nicht warum das in HTML5 unbedingt so implementiert werden musst.

Es wäre ja Beispielsweise auch mit "url-strict" und "url" beides möglich gewesen.
Ich könnte mir vorstellen, dass es dafür JavaScript alternativen gibt, die das auch ohne http machen.
Alternative wäre per rgxp und PHP, das halt dann erst nach dem Absenden.

Eine echte Validieren (quasie ein Aufruf der Website ob es diese gibt und sie erreichbar ist) findet ja auch nicht statt.
Somit sind trotzdem Schreibfehler oder absichtlich falsche Website möglich.

Deshalb hab ich mich in dem Fall für nen einfaches Textfeld entschieden.
Kommt natürlich auf den Fall drauf an, wie wichtig die exakte Eingabe ist.

edit: https://mathiasbynens.be/demo/url-regex
Bspw.: https://gist.github.com/dperini/729294

@JMMB
Genau das wird ja durch den Browser beim HTML5 "url" getan nur etwas sehr "streng", weil das "http" pflicht ist, während man mittlerweile ja eher hin geht und auch auf das "www." verzichtet.
Das ist nicht sonderlich nutzerfreundlich.

edit2:
Auch möglich ist ein automatisches Hinzufügen von "http://", wenn es fehlt.
Da gibts Ansätz dazu http://stackoverflow.com/questions/1...arts-with-http.

Zitat:

---

Zitat von Stranger

Seit HTML5 vergibt ja Contao automatisch den Input-Feldern das Attribut type="url" - das bewirkt bei jedweder Eingabe ohne http:// die Fehlermeldung: "Bitte geben Sie eine URL an."

---

Stimmt nicht so ganz. Es bewirkt, dass der Browser nur gültige URLs zulässt. Das beinhaltet neben http(s):// auch ftp:// und andere Protokolle. Und ohne Angabe des Protokolls, ist die URL halt nicht valide :cool:.

Zitat:

---

Zitat von Stranger

Warum reicht es nicht, wenn man eine Website mit www. eingibt?

---

Siehe oben, weil dann die URL nicht gültig ist. Zumal Webseiten ja nicht zwingend mit www. beginnen müssen. Es ist durchaus möglich dass, http://<domain>.<tld>, http://www.<domain>.<tld> und http://shop.<domain>.<tld> auf ganz andere Inhalte verweisen.


[QUOTE=Stranger;396798]Gibt es irgendeine Möglichkeit die Fehlermeldung anzupassen?[QUOTE]
Du meinst die Meldung des Browsers? Nicht dass ich wüsste.

Zitat:

---

Zitat von Stranger

Einen Platzhalter à la "Bitte geben Sie eine Website mit http:// ein" wäre zwar auch eine Alternative, aber irgendwie so "Erklärbär" mäßig und deshalb nicht wirklich optimal.

---

Naja, aber es wäre eben richitg. Der Sinn eriner Validierung ist ja, dass die Eingabe auch gültig ist. Wenn du das nicht möchtest, lass den Typ "URL" in dem Input-Feld eben weg. Man kann ja auch ein ganz normales Textfeld ohne Validierung benutzen ;)

Bei mir hat das geholfen:

Code:

---

<script>
$(function(){
        $('input[type="url"]').on('blur', function(){
          var string = $(this).val();
          if (!string.match(/^https?:/) && string.length) {
            string = "http://" + string;
              $(this).val(string)
          }
        });
});
  </script>

---

Codesnippet in das Kommentar-Template für das Formular einbinden oder in das Seitenlayout.