screzeValid - APF&jQuery clientside form validator

Dieser Bereich dient dazu, eure Tricks und Erweiterungen vorzustellen, damit diese auch andere Anwender nutzen können. // This area can be used to publish your tricks and extensions to the APF to be used by other developers.
Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 12.08.2009, 13:18:40

Wenn ich den Bereich schon Vorschlage, muss ich ihn auch einweihen :D
Aktuellere Version siehe Beitrag #11 dieses Threads, auch die aktuelle erklärung ist dort.


Ich habe ein jQuery Plugin (besser gesagt 2) geschrieben, welches clientseitige Formularvalidierung vornimmt.
Besucher können ein Formular nur dann absenden, wenn es schon valide ist, und bei invaliden feldern wird optional eine meldung angezeigt. (serverseitige prüfung MUSS trotzdem noch stattfinden!)
Ich habe darauf geachtet, dass die Seite trotzdem WC3 valide ist, was mir meines Wissens gelungen ist.
Link zu einem Beispiel befindet sich unten.
Basisinfos:
Version: 1.0 <- veraltet
getestet mit:
APF 1.10 RC2
jQuery 1.3.2
getestete Browser:
FF 3.0.13
IE 8.0.6001.x
Safari 3.2.3

(kann jemand noch google chrome und weitere browserversionen testen?)

Installation:


Die erweiterung setzte sich zusammen aus 2 jQuery plugins (validator und tooltips [wird vom validator optional für fehlerhinweise verwendet]) sowie dem APF taglib


Im downloadpaket, im ordner /mytools/html/taglib/
befindet sich "screezeValid_taglib_validate.php"
Diese Datei packt hin wo ihr wollt, wichtig ist nur dass ihr dann später das addtaglib richtig addressiert.

den ordner /js/ solltet ihr in den öffentlich zugänglichen Bereich legen, ich hab ihn direkt neben der bootstrap datei.

Im /js/ Ordner habe ich außerdem die aktuelle jQuery bibliothek gleich beigelegt.
Einbindung und konfiguration:
-> siehe Post zur aktuelle version

Jedem Validator ist eine Fehlermeldung zugeordnet, die er sich aus der Sprachendatei holt.
Derzeit sind nur Deutsch und Englisch enthalten. Die Sprache wird automatisch vom APF-taglib festgelegt.

Die Einbindung im APF-template sieht dann aus wie folgt. (addtagblib anpassen falls ihr einen anderen pfad benutzt habt)

Code: Alles auswählen

-> Siehe Post zur aktuellen Version
Im form element, wird der anzuwendende validator einfach als css-klasse angegeben.
die validatoren tragen das prefix "sV_" um nicht versehentlich mit richtigen css-klassen zu kollidieren.
Mehrfachvalidatoren sind möglich, wie man am Beispiel der optionalen Zahl sieht. Wird sV_Optional, in verbindung mit einem anderen validator eingesetzt, ist das Feld valide, wenn es leer ist, oder dem 2. validator entspricht.
Spezialfälle:
-> Siehe Post zur aktuellen Version


Wenn ein Feld optional ist, aber es falls es ausgefüllt wird, durch einen validator geschickt werden soll, so gibt man den eigentlichen validator + sV_Optional an:
class="sV_Optional sV_Number"
Beispiel und download:
-> Siehe Post zur Version 1.1 da diese aktueller ist.
Probierts mal aus und gebt mir feedback was ich verbessern kann.

Screeze.

edit1: eigene validatoren können in der jquery.screezeValid.js festegelegt werden, einfach das schema anschaun wies schon benutzt wird.
Zuletzt geändert von Screeze am 14.08.2009, 19:13:25, insgesamt 4-mal geändert.

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 12.08.2009, 13:59:44

Geplant für version 1.1:

1.blur event nutzen, statt change:
Ich will nicht dass das feld während der eingabe bei jedem buchstaben geprüft wird, sondern in dem moment wo das feld den focus verliert, der anwender also fertig mit tippen ist.

2. durch nutzen des blur events kann ich auch eine ajax prüfung einbauen, welche den text an eine gegebene adresse postet, und entweder true (für valide) oder false + eine fehlermeldung entgegennimmt. [z.b. sinnvoll um zu prüfen ob ein username schon vergeben ist bei der registration]
3. feld vergleich: vergleichen von 2 Feldern (z.b. passwort bestätigen)
4. feld alternative: Wenn von 2 Feldern entweder das eine ODER das andere ausgefüllt sein soll, aber NICHT beide (evtl. mit deaktiverung des 2. feldes)
5. libtag änderung: submitName -> button
5. Der Validator "sV_Birthday" akzeptiert "22.0.2999" als gültiges Datum. -> besseres regex finden
6.Der direkte Zugriff auf $this->__Attributes könnte zu einem "undefined index"-Fehler führen. Hier sollte besser $this->getAttribute() verwendet werden.
7. Den Inhalt von $this->__Attributes['formName'] kannst du durch $this->__ParentObject->getAttribute('name') ersetzten, da jede Taglib über $this->__ParentObject immer seinen Vater kennt.
8. Die Addressierung der Formulare wird statisch vorgenommen. Das bedeutet, dass die Validierung nicht mit zwei Formularen auf einer Seite zurecht kommt. -> bessere lösung suchen
9. Refactoring des codes zur performanceverbesserung
10. umbenennung der screezeValid/style.css in screezeValid/jquery.screezeValid.css zur verbesserung der einheitichen Namensgebung
(grün = schon erledigt)

Bekannte bugs:
Zeichensatzproblem im Internet Explorer 8 (wird gefixt in 1.1)
Zuletzt geändert von Screeze am 13.08.2009, 16:18:03, insgesamt 10-mal geändert.

Megger
Beiträge: 1233
Registriert: 04.11.2008, 10:57:37

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Megger » 12.08.2009, 14:13:15

Funktioniert es auch, wenn ich ein optionales Feld habe welches ich durch ein Regex prüfen will?

Was mir noch aufgefallen ist:
Bei APF heißt es

Code: Alles auswählen

button="test_submit"
und bei dir nennt es sich dann

Code: Alles auswählen

submitName="test_submit"
Da würde ich es begrüßen, wenn du mehr Richtung APF gehst.
Tutorial: Browsergame mit dem APF (Die ersten Parts handeln von Installation und Inbetriebnahme des APFs, deswegen sicherlich auch für alle Nicht-Browsergame-Programmierer interessant)

APF-Version
  • Entwicklung: 2.0
  • Produktiv: 1.15

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 12.08.2009, 14:15:41

der optional parameter funktioniert mit jedem anderen validator :ugeek:

stimmt da könnte ich mich an das APF anpassen. ist für 1.1 eingetragen.

Benutzeravatar
dr.e.
Administrator
Beiträge: 4555
Registriert: 04.11.2007, 16:13:53

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von dr.e. » 12.08.2009, 19:17:56

Hi Screeze,

schön, dass du deine Arbeit veröffentlicht hast. Bei einem ersten Review sind folgende Dinge aufgefallen:
  • Der Validator "sV_Birthday" akzeptiert "22.0.2999" als gültiges Datum.
  • Der direkte Zugriff auf $this->__Attributes könnte zu einem "undefined index"-Fehler führen. Hier sollte besser $this->getAttribute() verwendet werden.
  • Den Inhalt von $this->__Attributes['formName'] kannst du durch $this->__ParentObject->getAttribute('name') ersetzten, da jede Taglib über $this->__ParentObject immer seinen Vater kennt.
  • Die Addressierung der Formulare wird statisch vorgenommen. Das bedeutet, dass die Validierung nicht mit zwei Formularen auf einer Seite zurecht kommt.
  • Die Definition screezeValid_errors würde ich in das Plugin ziehen, dann kann man es mit einem Parameter erweitern (Stichwort: extends).
Nochmal: gute Arbeit! :)

Viele Grüße,
Christian
Viele Grüße,
Christian

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 12.08.2009, 19:48:00

ok danke fürs feedback:
1. datum:
regex is nich so mein fach, und js hat keine checkdate methode, falls mir da einer ein besseres regex liefern kann, ich nehms gerne ;)

2.wird erledigt in 1.1
3. wird umgesetzt in 1.1
4. schau ich mal ob ich das umgehen kann
5. die Fehler hatte ich eigentlich absichtlich rausgenommen, damit auch jemand der sich weniger mit js auskennt, ohne probleme die sprache ändern kann in einer extra-datei, und nich die ganze datei bearbeiten muss.

Benutzeravatar
dr.e.
Administrator
Beiträge: 4555
Registriert: 04.11.2007, 16:13:53

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von dr.e. » 12.08.2009, 20:22:21

Hi,
4. schau ich mal ob ich das umgehen kann
Render doch zur Adressierung einfach den Namen oder die ID des Formulars in den Quelltext...

Viele Grüße,
Christian
Viele Grüße,
Christian

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 12.08.2009, 20:23:57

jo hab ich grad, ich häng nur noch weng an der richtigen addressierung, aber das krieg ich auchnoch hin

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 12.08.2009, 20:54:32

War zwar weng gefrimel, der code sieht gemurkst aus, ich weiß zwar nicht WIESO es so ist, aber ich habs hinbekommen :D

Mal sehen ob ich den code morgen noch optimieren kann in dem Bereich....
1.1 wirds dann vorraussichtlich morgen geben.
allerdings hab ich den (:: ::) syntax nochmal überarbeitet, um mehrere validatoren, die zusatzinfos brauchen gleichzeitig nutzen zu können.
der sieht ab 1.1 dann so aus: (:RegExp: :/RegExp:) bzw. (:baseField: :/baseField:) beim confirm validator.

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 12.08.2009, 23:31:21

ich glaub mir is eben ne Idee gekommen. Ich kenn mich nich so gut mit jQuery aus, und weiß nich obs klappt, aber Wenn das klappen sollte, optimiert das die validierung extrem.

In meiner aktuellen version weiße ich jedes element an, beim verlieren des fokus eine validate() methode aufzurufen. diese geht ALLE möglichen validatoren durch, ob die klasse enthalten ist, um mehrere validatoren zu ermöglichen.
Meine idee wäre es, jeden validator in eine eigene methode zu packen, und dann direkt diese methoden an das blur event zu hängen. wenn man mehrere blur events festlegen kann, müsste das funktionieren, das sollte die validierung um einiges performancefreundlicher machen.
Werd ich morgen testen.

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 13.08.2009, 17:08:39

Version 1.1.1
Neuere Version 1.2 veröffentlicht, siehe dazugehöriger post für änderungen
*1.1.1 -> IE Bug fixed*
Ich glaub ich hab alle eure vorschläge umgesetzt, bis auf die sprachdatei mit in das plugin zu ziehen.
Außerdem hab ich einige Sachen verändert.

ungefährer changelog:
1.blur event statt change
2. ajax validator eingebaut
3. confirm validator eingebaut
4. alternative validator eingebaut
5. libTag nimmt jetzt das Attribut "button" anstelle von submitName entgegen
6. libTag braucht formName nichtmehr entgegenzunehmen, er wird automatisch ermittelt
7. Mehrere Formulare sind jetzt Problemlos möglich auf ein und derselben Seite. Jedes formular kann unabhängig von einem anderen configuriert werden (z.b. sprache). Gleich benannt felder in mehreren formularen kollidieren NICHT miteinander.
8. komplettes code-refactoring des js-plugin zur performanceverbesserung.
9. umbenennung der screezeValid/style.css in screezeValid/jquery.screezeValid.css zur verbesserung der einheitichen Namensgebung
10. libtag nimmt jetzt "ajaxAPI" als attribut entgegen. erwartet wird der dateiname/die adresse zu einer datei, gegen die ein sV_Ajax feld geprüft werden soll.
Basisinfos:
Version: 1.1.1
getestet mit:
APF 1.10 RC2
jQuery 1.3.2
getestete Browser:
FF 3.0.13
IE 8.0.6001.x
Safari 3.2.3

(kann jemand noch google chrome und weitere browserversionen testen?)
Einbindung und konfiguration:
Im <head> Bereich eures templates, müssen folgende dateien eingebunden werden:
Achtung: dateiname der screezeValid/style.css wurde auf screezeValid/jquery.screezeValid.css geändert.

Code: Alles auswählen

<script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/screezeTooltip/jquery.screezeTooltip.js"></script>
        <link href="js/screezeTooltip/jquery.screezeTooltip.css" rel="stylesheet" type="text/css">
        <link href="js/screezeValid/jquery.screezeValid.css" rel="stylesheet" type="text/css">
        <script src="js/screezeValid/languages.js" type="text/javascript"></script>
        <script src="js/screezeValid/jquery.screezeValid.js" type="text/javascript"></script>
Jedem Validator ist eine Fehlermeldung zugeordnet, die er sich aus der Sprachendatei holt.
Derzeit sind nur Deutsch und Englisch enthalten. Die Sprache wird automatisch vom APF-taglib festgelegt.
der Ajax validator nimmt seine Fehlermeldung von der API entgegen!

Die Einbindung im APF-template sieht dann aus wie folgt. (addtagblib anpassen falls ihr einen anderen pfad benutzt habt)

Code: Alles auswählen

<html:form name="testForm" method="post" action="">
      <form:addtaglib namespace="mytools::html::taglib" prefix="screezeValid" class="validate" />
      <screezeValid:validate showTips="true" button="test_submit" ajaxAPI="test.php" />

      Username: <form:text name="username" id="form_username" style="width: 300px;" validate="true" button="test_submit" class="sV_Text" filter="stripTags" /><br>
      Geburtstag: <form:text name="bday" style="width: 300px;" validate="true" validator="EMail" button="test_submit" filter="stripTags"  class="sV_Birthday"/><br>
      Optionale Zahl: <form:text name="optzahl" style="width: 300px;" validate="true" button="test_submit" filter="stripTags"  class="sV_Optional sV_Number"/>
      <form:button name="test_submit" />
</html:form>
Das Taglib benötigt folgende parameter:
showTips= true||false
button="NameDesButtonsWelchesMitDerFormVerknüftIst"
ajaxAPI="test.php" //datei welche für AJAX validatoren benutzt wird.
Verfügbare validatoren:
sV_Birthday
sV_EMail
sV_Telefon = sV_Fax
sV_Number
sV_Folder
sV_Text
sV_RegExp (s. unten für details)
sV_Ajax
sV_Confirm
sV_Alternative
sV_Optional (s. unten)
sV_Checked // Seit 1.2, für checkboxen
sV_Unchecked // Seit 1.2, für checkboxen
Spezialfälle:

RegExp:
um einen beliebigen regulären Ausdruck prüfen zu können, ist folgendes Notwendig:
im class attribut wird sV_RegExp angegeben.
zusätzlich wird der reguläre ausdruck OHNE DELIMITER zwischen (:RegExp: und :/RegExp:) gesetzt, als 2. klassenangabe.
Beispiel:
Regex: /^([a-zA-Z0-9_\.\-\+])+$/
class="sV_RegExp (:RegExp:^([a-zA-Z0-9_\.\-\+])+$:/RegExp:)"

Optionale Felder:
Wenn ein Feld optional ist, aber es falls es ausgefüllt wird, durch einen validator geschickt werden soll, so gibt man den eigentlichen validator + sV_Optional an:
class="sV_Optional sV_Number"


Bestätigungsfelder:
class="sV_Confirm (:baseField:NameDesBasisFeldes:/baseField:)"
Das Bestätigungsfeld wird geprüft ob es mit dem Basisfeld übereinstimmt.

Alternative Felder:
class="sV_Alternative (:alternative:alt2:/alternative:)"
alt2 entspricht in diesem Fall dem Name des 2. Feldes. das 2. Feld muss mit Name auf das 1. Feld zeigen. Es darf immer nur 1 der Felder ausgefüllt sein.

Ajax validator:
class="sV_Ajax"
Die Eingabe wird an eine pro Formular definierte datei per post gesendet, und die xml-Antwort ausgewertet.
In der php Datei stehen die post Werte input, formName, inputName (der Feldname) und language zur verfügung.
Erwartet wird eine Antwort in xml format, z.b.:

Code: Alles auswählen

<api>
    <valid>false</valid>
    <msg>Die Fehlermeldung hier rein</msg>
</api>
Weitere infos können der test.php im Paket entnommen werden.
Beispiel und download:
-> siehe post zu 1.2
Zuletzt geändert von Screeze am 17.08.2009, 16:43:55, insgesamt 3-mal geändert.

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 13.08.2009, 18:06:07

+grml+ hab ich schonmal gesagt dass ich den IE hasse?

Bekannte Bugs in v1.1:
erledigt seit 1.1.1: Ajax Validator funktioniert nicht Im Internet explorer, weil er die xmlNodes nicht findet. Ne lösung such ich grad....
Zuletzt geändert von Screeze am 13.08.2009, 18:55:59, insgesamt 1-mal geändert.

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 13.08.2009, 18:55:11

v1.1.1 Veröffentlich, dem Internet explorer musste man manuell auf die sprünge helfen, damit er erkennt dass er die ajax-antwort als xml handhaben muss..
Link und version im post davor angepasst.

Benutzeravatar
dr.e.
Administrator
Beiträge: 4555
Registriert: 04.11.2007, 16:13:53

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von dr.e. » 13.08.2009, 22:07:34

Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Hast du auch mal nach strict validiert? transitional erlaubt ja quasi alles. ;-) Ansonsten schaut das wirklich gut aus.

Werde den Thread bei Gelegenheit mal auf der Seite als Tutorial/Artikel für die Integration von jQuery in APF-Templates verlinken, wenn ich darf.

Viele Grüße,
Christian
Viele Grüße,
Christian

Benutzeravatar
Screeze
Beiträge: 1920
Registriert: 05.08.2009, 09:49:04
Kontaktdaten:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 13.08.2009, 22:24:24

klar darfst du ;)
Hmm sctrict hab ich noch nicht getestet, werd ich gleich mal machen.


edit:
Auf meiner Testseite sind mit strict zwar 4 Errors, aber die resultieren daraus dass ich meine beschreibungen und den submit button nicht in ein div/p element gesteckt hab. Der code selber ist also 100% valide.

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste