Formular - input validieren

mk84

Hallo liebes team, liebes forum,

bin neu hier und hätte eine frage, bzw. hilfe nötig.

es geht um folgendes, ich habe ein formular erstellt (kontaktformular - standard mit NAMEN MAIL usw... ) und wollte wissen ich es machen kann wenn jemand zb. den namen richtig eingibt das das feld zb GRÜN ist (also als richtig angenommen, keine zahlen sondern buchstaben) oder zb. ein grünes zeichen im feld erscheint, und beim mail zb. ROT wenn man das @ nicht eingibt oder ähnliches...

wie könnte ich das hinkriegen ?!?!?

vielen lieben dank an alle die helfen könnten...

lg

Arne Drews

Es gibt seit HTML5 das Attribut pattern, wo Du reguläre Ausdrücke für das erforderliche Eingabe-Muster erstellen kannst.

Mit dem Pseudo-Selektor :valid oder :invalid kannst Du das bestenfalls schon einfärben.

Sollte das nicht ausreichen, müsstest Du mit JS eine Prüfung der Eingabe machen und dem Element eine vorgefertigte CSS-Klasse zuweisen.

mk84

hallo arne,

vielen dank für deine schnelle antwort, werde ich mir gleich anschauen..

PS: jetzt habe ich ein screenshot gemacht, wie ich es machen möchte, sozusagen was ich oben versucht habe zu erklären..

lg

html-seminar.de/woltlab/attachment/1670/

basti1012

Hast du schon irgendwas geschrieben ? Fals du nicht weiter kommst dann poste doch mal dein Code dann können wir sehen ob du auf den richtigen weg bist

Arne Drews

Gerade bei E-Mail funktioniert das relativ zuverlässig mit <input type="email" und :valid bzw. :invalid.

mk84

hallo basti,

ja was den code betrifft habe ich halt nur das formular derweil..

html-seminar.de/woltlab/attachment/1671/

Code

<form>

    <input type="text" id="fname" name="firstname" placeholder="First Name">
    <br>
    <input type="text" id="lname" name="lastname" placeholder="Last Name">
    <br>
    <input type="email" id="email" name="emaill" placeholder="E-Mail">
    <br>
    <textarea id="subject" name="subject" placeholder="Your Message.." style="height:170px"></textarea>
    <br>
    <div  style="text-align: center">
        <input  type="submit" value="SEND THAT MAIL">
    </div>

</form>

Alles anzeigen

mk84

PS: natürlich gibt es auch ein CSS wo das formular ausschaut wie am SCREENSHOT

basti1012

Ja dann brauchst du ja nur den Hinweiß von Arne Drews aus post 5 zu beachten und schon sollte es klappen. Einmal kurz nach den code googeln was er schrieb und ich bin mir sicher das du es hinbekommst.

Du könntest auch nach regex googeln. Da gibt es schon fertige Codes die du nur noch auf dein Formular anpassen mußt.

Noch besser du benutz das hier gesagte pattern aus post 1 dann brauchst du die regex abfragen auch nicht,sondern nur bei komplizierten abfragen

mk84

halööööchen,

danke nochmals für die hilfen, habe es endlich geschafft, und zwar mit bootstrap validation... auch mit dem icons drinnen und und..

jetzt aber ein anderes problem, vielleicht kennt es jemand von euch...

für die gesamte seite habe ich eine jquery 2.2.xxxxx und für dieses formular die jquery 1.1.xxxx ... wenn beide sind funktioniert das formular nicht, gibt es eine möglichkeit das das jquery 1.1. nur für das formular geladen wird, habe es auch in den div container geladen, geht auch nicht...

vielleicht kennt jemand das problem und hätte eine lösung

vielen lieben dank im voraus

lg

Arne Drews

Das macht keinen Sinn. Entscheide Dich für eine Version und bring alles darunter zum Laufen.

Anbieten tut sich aktuell dann auch jQuery 3, wenn es denn unbedingt jQuery sein muss.

mk84

ja das problem ist, wenn ich die 2.2. lasse funktioniert die seite, aber das formular nicht, und wenn ich die 1.11. lasse geht das formular aber die seite nicht...

ist nicht selber programmiert, sondern alles immer eingebaut, und das formular ist mit 1.11. und die seite mit 2.2. ....

basti1012

Wenn man 2 verschiedene jquery versionen rein läd kommt es eigentlich fast immer zu konflikte. Dein Code sollte eigentlich auch mit der neusten Version laufen. Es kann sein das du irgendwo noch veralteten Jquery Code nutzt der unter den neuen Version nicht mehr läuft bzw unterstützt wird. Dazu müßte man deinen Code kennen um das sagen zu können. Die alten Codes die nicht mehr laufen lassen sich mit anderen Jquery Code aber wieder zum laufen bringen.

Hast du einen Link zur deiner Seite ? Dann lad da mal Jquery 3.2.1 rein und zeig uns mal den Link

Jetzt mitmachen!