input feld auf bestimmte zeichen reduzieren

Hallo,
Ich arbeie gerade an einer website bei der ich ein input feld habe
Code:
<input   type="text"  >
und ich will dort nur bestimmte sachen drin erlauben, ich weiß das man das mit
Code:
pattern="[zeichen]"
machen kann aber ich will z. B. nicht alle buchstaben sondern nur bestimmte wörter wie frankfurt oder Berlin zulassen und nicht das ganze alphabet. Zusätzlich will ich dann auch auslesen welche zeichen nicht richtig sind in javascript. Gibt es da eine möglichkeit? Danke schonmal im vorraus
 

alinnert

Mitglied
Ganze Wörter erlaubst du mit pattern folgendermaßen:

HTML:
<input type="text" pattern="(Frankfurt|Berlin)" required />
required brauchst du, weil sonst ein leeres Feld auch OK ist.

Wie definierst du "welche Zeichen nicht richtig sind", wenn mehrere Wörter möglich sind? Sind bei "Fralin" dann die ersten drei Buchstaben falsch (weil sie "Ber" lauten müssten) oder die letzten drei (weil sie "nkf" lauten müssen und zusätzlich fehlen drei Buchstaben)?

Es klingt wie eine Art Quiz. In dem Falle würde ich gar nicht mit pattern arbeiten, wenn du sowieso JS für Fehlerüberprüfung benötigst. Dann kann sie auch die Validierung von vornherein übernehmen.
 
Ok ich habe mich da wahrscheinlich falsch ausgedrückt, ich muss nicht wissen was falsch ist sondern nur ob etwas falsch ist. Und gibt es eine möglichkeit den style zu ändern wenn dort unzulässige zeichen sind?

Danke schonmal im vorraus
 

alinnert

Mitglied
Ach so, ja gut.

Wenn du pattern verwendest, dann so:

CSS:
input:invalid {
    /* dein CSS */
}
Die Styles greifen, wenn du das Input-Feld verlässt (rausklickst oder raustabbst) und dabei ungültiger Inhalt drinsteht.
 

alinnert

Mitglied
So:

HTML:
<input id="input" ... />
Javascript:
document.getElementById("input").addEventListener("invalid", (event) => {
    // Wird ausgeführt, wenn das Formular
    // abgeschickt wird/Validität geprüft wird
    // und Input-Feld dabei invalide ist.
    event.currentTarget.value; // <- Ist der Inhalt des Inputs
});
 
Sollte das einfach so fuktionieren oder muss ich dafür vorher noch etwas anderes einbinden wil ich habe jquery eingebunden und es wird auch in css als invalid ausgegeben aber jaavscript gibt garnichts aus. Muss ich da noch etwas anderes eintragen?
 

JR Cologne

Administrator
Teammitglied
Das sollte so funktionieren. jQuery brauchst du da nicht einzubinden, da das pures JS ist.

Der Grund dafür, dass du denkst, dass nichts passiert, ist, dass durch den von @alinnert gezeigten Code nichts ausgegeben wird bzw. nicht irgendeine sichtbare "Reaktion" angestoßen wird.
Du kannst testweise mal den Inhalt des fehlerhaften Inputs in der Browser-Konsole ausgeben, indem du in die Funktion console.log(event.currentTarget.value); schreibst.
 

Werner S

Neues Mitglied
Sollte das einfach so fuktionieren oder muss ich dafür vorher noch etwas anderes einbinden wil ich habe jquery eingebunden und es wird auch in css als invalid ausgegeben aber jaavscript gibt garnichts aus. Muss ich da noch etwas anderes eintragen?
Hab es gerade auch mal getstet, es funktioniert.

Der Grund dafür, dass du denkst, dass nichts passiert, ist, dass durch den von @alinnert gezeigten Code nichts ausgegeben wird bzw. nicht irgendeine sichtbare "Reaktion" angestoßen wird.
Ich glaube er sucht eine Funktion die ihm direkt eine Meldung ausgibt wenn jemand was falsches in das Inputfeld tippt
 
Nein das ist nicht das problem, ich hab auch versucht selber etwas ausgeben zu lassen. Das problem ist das ich <form></form> und type="submit" nicht richtig benutzt habe mien code sieht aktuell so aus:
Code:
<input  pattern="meinezeichen" type="text"   id"meineid" required>
<div> irgendein text und ganz viel tags<div>
<button type="submit">
damit das ganze fuktioniert müsste ich das alles in einen <form> tag tun wodurch zwar dann das invalid funktioniert aber nicht meine animationen im div. Gibt es eine möglichkeit den submit button funktionieren zulassen ohne das ich das alles in einen <form> tag machen muss?

Danke schonmal im vorraus
 

JR Cologne

Administrator
Teammitglied
Wenn du die Funktionalität eines klassischen Submit-Buttons haben möchtest, brauchst du eigentlich ein Formular.
Ich würde mich also erstmal fragen, warum denn die Animationen in deinem Div nicht funktionieren, wenn du ein Formular nutzt.

Möchtest du stattdessen aber einfach nur sicherstellen, dass bei Klick auf den Button oder bei einem Input-Event deines Inputs, die Validierung ausgelöst wird, kannst du hierfür die Methode checkValidity() des Input-Elements nutzen.

Beispiel:
HTML:
<input type="text" id="input" pattern="(Frankfurt|Berlin)" required />
<button id="submit">Submit</button>
Javascript:
const input = document.getElementById("input");

// hier wird die Validierung beispielhaft bei Klick auf den Button ausgelöst,
// alternativ oder zusätzlich könnte man auch ein input-Event des Input-Elements o.ä. nutzen
document.getElementById("submit").addEventListener("click", (event) => {
    // Validität der Eingabe ins Input-Element wird überprüft, bei einer falschen Eingabe wird ein invalid-Event ausgelöst
    input.checkValidity();
});

// hier greifen wir das, in dem Fall, selbst ausgelöste invalid-Event auf
input.addEventListener("invalid", (event) => {
    console.log(event.currentTarget.value);
});
 
Ok danke mit checkValidity() funktioniert jetzt alles. Aber es kommt ein anderes problem auf, wenn ich im pattern das hier stehen hab:
Code:
pattern="(Frankfurt|Berlin)"
und ch in die eingabezeile Frankfurttttt schreibe gibt er mir das auch als valid ein weil vorher ein richtiger begriff war. Kann man das ganze verhindern so das nur das eine wort ohne irgendwas dahinter valid ist?
 
Oben Unten