JavaScript Formularvalidierung - auf Komma prüfen?

[Dsimon24]

Moin zusammen,

ich brauche mal kurz einen Tipp. Leider kann ich dazu im Bereich der
JS-Validierung nicht viel finden. Vielleicht suche ich aber auch falsch.

Also, mittels document.getElementById("ansprechpartner").required = true;
prüfe ich, ob ein entsprechenden Input-Feld in meinem Formular ausgefüllt wurde.
Wie kann ich denn prüfen, ob in diesem Feld auch u.a. ein Komma vorhanden ist?
Dann möchte ich, dass eine entsprechende Meldung erscheint, ähnlich, als wäre
das Feld nicht ausgefüllt.

VG, David

 

[Mihawk90]

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Dort ist alles was man zur Validierung wissen muss, inklusive Beispielen.

Auch hier gilt aber was ich schon mal hier geschrieben hab:
https://www.computerbase.de/forum/threads/html-mail-versendet-subject-nicht.1917603/post-23587648

 

[benneq]

Wenn's um komplexere Formulare geht, würde ich sowas wie "yup" nehmen: https://github.com/jquense/yup

 

[Dsimon24]

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Dort ist alles was man zur Validierung wissen muss, inklusive Beispielen.

Ich denke mal, da komme ich mit pattern weiter, so wie ich es jetzt
verstanden habe!? Aber hauptsächlich sehe ich nur Fragezeichen...

Ist auch nur ein kleines Formular.
Da prüfe ich mittels einer if-Abfrage den Wert eines Checkbox.
Demnach setze ich das Feld dann 'ansprechpartner' auf required:

document.getElementById("ansprechpartner").required = true;

Nur, wenn ich es per JS auf true gesetzt habe, möchte ich auch prüfen,
ob innerhalb des Wertes im Input-Feld auch ein Komma vorhanden ist.
Wenn ja, dann gut - wenn nein, dann Meldung. Geht das so einfach?

 

[Mihawk90]

Du kannst doch nach setzen des required Attributes auf die gleiche Weise auch noch ein pattern anfügen. Vor absenden wird das dann vom Browser geprüft.

 

[Dsimon24]

Oder lasse ich mit pattern nur ein Komma zu, falls eins vorhanden ist? Habe ich da gerade einen Denkfehler?

 

[Mihawk90]

Das pattern ist eine RegEx, die auf den Text angewendet wird. Wenn sie matcht, wird abgesendet, wenn nicht, dann nicht. Das pattern musst du dir anhand deiner Anforderungen schon selbst basteln. Gibt ja genügend Seiten um was zu testen, regex101.com, regexpal.com, sind nur 2 Beispiele. Wenn du dich mit RegEx nicht auskennst ist es ein guter Zeitpunkt dich einzulesen, die wirst du immerwieder brauchen, und beide Seiten haben eine Mini-Dokumentation die beim basteln hilft.

 

[Dsimon24]

Dann muss ich mir das wirklich mal genauer ansehen. Dennoch muss ich das jetzt schnell fertig bekommen

Also: document.getElementById("ansprechpartner").pattern = "/,/g";

/,/g habe ich aus regextester.com - Gebe ich dann auf der Seite einen
Namen ein ohne Komma, gibt´s kein Match - mit Komma gibt´s dann
ein Match. Müsste doch so sein, oder? Funktioniert nämlich nicht.

Also, er lässt mich weder ohne, noch mit Komma zwischen Vorname und Nachname weiter.

 

[Mihawk90]

Das Pattern muss aber nicht nur ein einzelnes Zeichen matchen, sondern den gesamten String.
Mit /,/g wird ausschließlich ein Komma gematcht, in dem String dürfte also nichts anderes enthalten sein um "komplett" gematcht zu werden. Du müsstest also ein pattern verwenden, das zusätzlich noch alles vor und nach dem Komma matcht.

Und laut der pattern Dokumentation sollen auch keine Flags angegeben werden, sondern ausschließlich die RegEx:

No forward slashes should be specified around the pattern text.

 

[abilio]

wenn dir regex zu aufwendig ist, such doch mit indexOf() nach deinem Komma

 

[Dsimon24]

Aber dann müsste ich ja hiermit richtig funktionieren, oder?:

document.getElementById("ansprechpartner").pattern
= "[a-zA-züöäÜÖÄß ], [a-zA-züöäÜÖÄß ]";

Nachname, (<- Komma) Vorname

 

[benneq]

Für deutsche Vor- und Nachnamen, die nur 1 Zeichen lang sind, sollte das funktionieren, ja. Btw: " , " (also Leerzeichen-Komma-Leerzeichen-Leerzeichen ist auch ein schöner Name
Was machst du mit Franzosen, Russen, Griechen, Chinesen, etc? Und wenn der Name mal länger als 1 Zeichen sein sollte?

 

[Mihawk90]

Theoretisch ja, dann hast du aber das Problem, dass Namen mit Sonderzeichen (André) oder Doppelnamen (Max-Peter) nicht gehen.
Außerdem würdest du damit nur einen Buchstaben vor und nach dem Komma matchen. Du brauchst also noch einen Quanitifier. Wenn du sicher gehen willst, dass immer beide angegeben sind bietet sich + an (1 Zeichen oder mehr).

Besser ist es da nicht auf spezielle Zeichen zu beschränken, sondern zum Beispiel \S ("any non-whitespace character") zu verwenden:
https://regex101.com/r/D1rC1c/3

 

[mental.dIseASe]

was du brauchst, ist "beliebig viel Krempel, dann Komma, dann beliebig viel Krempel", nicht "Buchstabe, Komma, Buchstabe".

 

[Dsimon24]

Ich schreib gleich einfach da rein: Bitte <Nachname>, <Vorname> eingeben! Ich werd da nicht schlau draus.

 

[Mihawk90]

Ja, aber du machst ja nicht umsonst eine Validierung... reinschreiben kannst du da viel, die Validierung dient ja dazu deine Vorgaben auch umzusetzen.
Beispiel ist in meinem regex101-Link oben.

 

[mental.dIseASe]

Du wirst nicht umhin kommen, dich früher oder später mit regulären Ausdrücken auseinanderzusetzen. Dann überleg dir als nächstes, ob die Anforderung, dass in der Mitte ein Komma stehen muss, überhaupt sinnvoll ist oder ob es als ganzes in die Datenbank kann. Als nächstes tu das, was dir @Mihawk90 geraten hat: du musst sämtliche Validierungen (auch) auf Serverseite durchführen, sonst kannst du dir den Aufwand, darüber nachzudenken, direkt schenken.

 

[mastaqz]

Ein Feld "Ansprechpartner" ist fragwürdig, v.a. in der Form getrennt durch ein Komma. Da wirst du allerlei Eingaben haben, die verkehrt sind.

Was machen, wenn der Vorname nicht bekannt ist? "Nachname," ? Damit es validiert wird, geben die Leute dann Schrott ein. Und was ist mit Doppelnamen? Was ist mit Leuten, die eher formal unterwegs sind und dann "Herr" eingeben? Deshalb würde ich einfach ein Feld für Nachname und eins für Vorname machen. Und einfach nur schauen, ob der Nachname befüllt ist. Einziges Problem sind dann Namen, die anders funktionieren, chinesische oder so. Aber auch dazu wirft Google genug Best Practice aus. Zusätzliche Validierung im Backend natürlich nicht vergessen.

 

[mambokurt]

Tu dir selbst nen Gefallen und mach zwe Felder draus. Das zu matchen ist schon total assig weil jemand zwanzig Vornamen haben kann und der Spanier auch mal (eigentlich immer) zwei Nachmamen. Also außer Sonderzeichen und Zahlen rauszumatchen kannste da nicht viel machen...