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:

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 15.08.2009, 15:35:04

Jetzt wollt ich grade v1.2 erstellen, in der checkboxen und radio buttons auf checked/nicht checked validiert werden können, muss aber leider feststellen, dass der Firefox keine möglichkeit bietet checkboxen und radio buttons farblich abzusetzen, mit hintergrund oder rahmen.
An sich funktioniert mein Script, aber im firefox fehlt halt eine info dass die checkbox/radiobutton der fehler im formular ist, das kann sehr irritierend wirken...
Was würdet ihr vorschlagen als alternative?
ich könnte einen container um die checkbox/radiobuttons setzen, falls sie nicht richtig ausgefüllt wurde, und deren Rahmen einfärben..
oder n kleines bild mitliefern, wo ein rotes ausrufezeichen drauf ist, und das neben der checkbox einfügen...
Aber gibts evtl. ne bessere lösung?

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

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von dr.e. » 17.08.2009, 08:15:26

Hi,

das Thema kenne ich, deswegen funktioniert die Validierung im APF noch nicht so ganz schön bei Checkboxen. Für die Neu-Implementierung der Form-Taglibs habe ich mir überlegt, ein span um das Feld zu legen und dieses mit den entsprechenden Styles zu versehen, wenn ein Feld nicht valide ist. Selbiges könntest du auch mit der JS-Lösung tun.

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 » 17.08.2009, 16:41:39

Version 1.2.1:
x.x.1 -> performance bug behoben.
Wie angekündigt dann hier die version 1.2.1
der changelog ist kurz:
Checkbox support hinzugefügt.
Radio buttons werden NICHT unterstützt, denn deren auswertung als gruppe gestaltet sich mit jQuery doch ziemlich kompliziert, und mir fallen eigentlich keine anwendungsbeispiele ein die den aufwand rechtfertigen.

Neue Validatoren:
sV_Checked
sV_Unchecked
es wird ein span um die checkbox erzeugt, welche die klassen abbekommt.
Als events werden sowohl blur als auch change benutzt, allerdings funktioniert im IE offensichtlich nur blur.

Zuletzt geändert von Screeze am 18.08.2009, 15:35:17, 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 » 17.08.2009, 18:57:15

Sollte jemand zeilenumbrüche der form \n (z.b. durch einen umbruch im template) in der rückgabe des ajax wertes haben, führt das oft zu einem fälschlicherweiße nicht-validem feld, wobei die Fehlermeldung dann leer ist.

Abhilfe verschafft folgende kleine änderung in der jquery.screezeValid.js:

Zeile 314

Code: Alles auswählen

if($("valid", xml).text() != "true"){
ersetzen durch:

Code: Alles auswählen

if(jQuery.trim($("valid", xml).text()) != "true"){
und zeile 315:

Code: Alles auswählen

jQuery.screezeValid.handleInput(false, element, 'Ajax', formName, $("msg", xml).text());
ersetzen durch:

Code: Alles auswählen

jQuery.screezeValid.handleInput(false, element, 'Ajax', formName, jQuery.trim($("msg", xml).text()));
Wird in der nächsten version natürlich drin sein.

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

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Megger » 17.08.2009, 19:17:18

Habe einen kleinen Bug entdeckt:
Wenn ich zuerst Confirmation anklicke und dann in ein anderes Feld wird dieses als valide gekennzeichnet. Ändere ich nun den Text im BaseField, bleibt das andere Feld valide. Weiß nicht in weiweit es möglich ist, dass andere Feld dann als invalide zu kennzeichnen. Beim abschicken der Form wird es dann aber richtig angeziegt.
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 » 17.08.2009, 19:22:05

hmm...

ich dachte es würde reichen wenn beim endgültigen Prüfen des Formulars dann die abhängigkeit wieder erkannt wird. Problem ist, dass ich ja beim baseField eigentlich nichts mit übergeben wollte. Ich werd aber mal schaun, villeicht kann ich an alle baseFields ein blur event dranhängen, welches das blur event des abhängigen feldes auslöst. sollte klappen.

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

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 17.08.2009, 20:08:26

Hmm da brauch ich mal die Hilfe von jemand der sich besser mit jQuery auskennt.

Versucht hab ich folgendes:
(die \n hab ich jetzt reingemacht, damit ich kommentare dazusetzen konnte. Wo eins is, einfach die zeilen zusammenfügen)

Code: Alles auswählen

// Alle Confirmation Felder auswählen  
$('form[name="' + options.formName + '"]').find('.sV_Confirm') //\n 
// \n blur event auf confirmation Feld setzen, um die normale prüfung durchzuführen
.bind("blur", function () {     
            jQuery.screezeValid.valConfirm($(this), options.formName);
        })  // \n 
// \n Alle confirmation Felder einmal durchgehen, und eine Funktion ausführen, welche die baseFields mit blur events bestücken soll.
.each(function (){
             // Form auswählen, darin nach input mit dem Name, welcher loadAttribute extrahiert, suchen und blur event dranhängen, welches das blur event des Confirmation fields auslöst.
            $('form[name="' + options.formName + '"] input[name="' + jQuery.screezeValid.loadAttribute($(this), 'baseField') + '"]').bind('blur', function (){
                $(this).blur(); // blur event des confirmation fields auslösen.
            });
        });
Ich verstrick mich dan bisschen...
Jedenfalls gibt es egal welches Feld geprüft wird, einen Fehler in der Konsole:
"Too much recursion"

Also... Der plan war folgender:

Seitenaufruf
-> Allen Feldern die einen validator benötigen das entsprechende blur event anhängen (das klappt ja vorher auch schon, nix neues)
-> Alle confirmation Felder einzeln durchgehen {
-> -> Das jeweilige baseField extrahieren
-> -> an das baseField ein blur event hängen, welches das blur event des ConfirmationField auslöst
-> }

Eingabe in baseField
-> Focus entfernen (blur event wird ausgelöst)
-> Eingabe wird validiert
-> blur event des confirmationField aufrufen
-> confirmationField wird validiert

Ich schätze dass die $(this) sich in obigen kontexten nicht so verhalten wie ich mir das erhofft habe. Problem ist, wie krieg ich die jeweilig benötigen Infos (baseField, ConfirmationField) in die jeweiligen Funktionen rein? Paramater kann ich bei callbacks ja nicht übergeben.

edit: genauer gesagt das Problem ist:

Code: Alles auswählen

$(this).blur();
das $(this) ist hier nicht wie ich annahm das confirmation field, sondern das baseField, woraus sich eine endlosschleife ergibt.
Wie bekomm ich da das confirmationfield rein?

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

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von dr.e. » 17.08.2009, 21:53:21

Hi Screeze,

du musst vermutlich das find() statement wiederholen oder mit event.* bei

Code: Alles auswählen

function(event){
   $(event.currentTarget).blur();
}
arbeiten. Konnte das gerade nicht genauer ausprobieren, vermute jedoch eine Überlagerung. Wichtig ist jedoch, dass die event.*-Variablen im IE oftmals nicht sauber gesetzt werden. :(
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 » 17.08.2009, 23:09:21

hmm ne das wiedrholen hat wenig sinn.
das $(this) deutet hier schlicht und einfach auf ein anderes element als ich es brauche, aber in der funktion kann ich ja nichtmehr auf die vorherige zurückgreifen.
Ich schätze mir bleibt wieder nur ne "unsaubere" lösung über ne globale variable.

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

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 18.08.2009, 15:34:04

Hmm also ich gebs auf, ich kriegs auf diese art nicht hin.
Ich denke es reicht bei der confirm methode einfach wenns abschließend nochmal geprüft wird, normalerweiße sind die ja in der richtigen reihenfolge.


Aber trotzdem gibts
version 1.2.1
Denn mir ist ein gravierender performance-bug aufgefallen, den ich noch entfernt habe.

Download:
http://the-screeze.de/APF/extensions/sc ... -1.2.1.rar
Beispiel ect. wie bei 1.2

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

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Megger » 27.08.2009, 10:29:32

Was cool wäre so in Zusammenarbeit mit dem APF ist folgendes:
Das APF müsste die Validatoren für ein Formular in einer Config Datei gespeichert haben, so könnte man dann auch mit Javascript/AJAX darauf zugreifen und so dann schon die gleichen Validatoren anbieten.

Sowas in der Art:

Code: Alles auswählen

[Formular1]
Inputfeld1=Email
Inputfeld2=Telefon
Inputfeld2=Optional

[Formular2]
...
So könnte man mit dem APF und einem Javascript Validator darauf zugreifen.
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 » 20.09.2009, 20:15:46

Seit 1.10 STABLE funktioniert die gepostete variante nicht.
Es muss ein suchen und ersetzen in der datei /js/screezeValid/jquery.screezeValid.js
angewendet werden.
es müssen 17 vorkommen von 'form[name' (ohne ')
ersetzt werden durch 'form[id' (ohne ')
andernfalls funktioniert die addressierung nichtmehr.
edit: und natürlich dem form eine id gegeben werden, die dem name entspricht.

Benutzeravatar
MrNiceGuy
Beiträge: 749
Registriert: 03.02.2009, 16:49:42
Wohnort: Nienburg / Weser

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von MrNiceGuy » 07.10.2009, 07:53:10

Moin moin!

Erstmal: Hut ab! Geile Erweiterung. Wird vielleicht demnächst auch bei mir Verwendung finden, sobald ich das Projekt erstmal zum Laufen gebracht habe. Aber es sind mir ein paar Dinge aufgefallen:

EMail-Validierung habe ich zumindest immer sehr ernst genommen und möglichst genaubestimmen wollen, ob die EMail-Adresse auch gültig ist. Hier ist jedoch aufgefallen, dass z.B. 123@123.de akzeptiert wird. Laut denic sind Domainnamen aber nach bestimmten Richtlinien zu benennen, wobei 123.de dann nicht gültig wäre.
Und dann ist mir noch etwas aufgefallen: Wann sollte man jemals eine Checkbox benötigen, die NICHT aktiviert sein darf? Da habe ich ja gerade nicht schlecht gestaunt :)
Der Rahmen um die Checkboxen wirkt im Übrigen ziemlich dick!? Aber das ist nur ein optisches Kriterium und soll lediglich der Anmerkung dienen.

Als coole Erweiterung fände ich noch, dass erkannt wird, ob man überhaupt seit dem Fokus auf ein Feld etwas an dessen Inhalt geändert hat. Wenn nicht, sollte das Feld auch nicht umrandet werden!? Aber vielleicht ist das ja auch gewollt?

Ansonsten bin ich echt beeindruckt!
There are only 10 Types of people in the world:
Those who understand binary and those who don't.

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

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von Screeze » 07.10.2009, 20:19:36

erstmal danke. ;)

also:
EMail-Validierung habe ich zumindest immer sehr ernst genommen und möglichst genaubestimmen wollen, ob die EMail-Adresse auch gültig ist. Hier ist jedoch aufgefallen, dass z.B. 123@123.de akzeptiert wird.
wenn du einen vorschlag für ein besseres regex hast, kannst du mir das gerne zukommen lassen, ich baus dann bei gelegenheit ein.
Wann sollte man jemals eine Checkbox benötigen, die NICHT aktiviert sein darf?
Wie du mit email validierung umgehst, gehe ich mit dem thema bots um.
Dabei vermeide ich soweit möglich die benutztung von captchas, denn es gibt sehr gute alternative methoden.
u.a. kommen hier checkboxen in einsatz, welche NICHT ausgewählt werden, und welche die ausgewählt werden (z.b. 3 stück mit zufallsnamen von denen 2 nicht und 1 ausgewählt werden muss, die reihenfolge immer variierend. von den 2 kann man mindestens eine z.b. in ein nicht sichtbaren bereich verschieben (oder unsichtbar machen). Darauf fällt jeder Bot rein, und selbst bots die speziell für die seite geschrieben wurden kommen da meistens nicht durch.
Der Rahmen um die Checkboxen wirkt im Übrigen ziemlich dick
dessen sind wir uns bewusst, jedoch gibt es keine andere möglichkeit. schonmal versucht eine checkbox farbig zu umranden, und das in allen browsern kompatibel? in manchen kann man der cb selber einen rahmen geben, aber in den meisten (wie auch ff) klappt das nicht, und man muss sich mit sowas behelfen.
Als coole Erweiterung fände ich noch, dass erkannt wird, ob man überhaupt seit dem Fokus auf ein Feld etwas an dessen Inhalt geändert hat. Wenn nicht, sollte das Feld auch nicht umrandet werden!? Aber vielleicht ist das ja auch gewollt?
Das ist gewollt. es gibt ja durchaus formulare wo man einige felder mit tabulator durch"springt". dabei finde ich es optisch schöner wenn alle oberhalb des punktes wo ich grade bearbeite schon ausgewertet wurden. (wer bearbeitet auch ein feld von unten rauf, und geht vorher von oben nach unten durch mit fokusieren? :D)

Leider komm ich wegen technischer probleme demnächst nicht so recht zum entwickeln, aber das regex kannst du ja mal posten.

Benutzeravatar
MrNiceGuy
Beiträge: 749
Registriert: 03.02.2009, 16:49:42
Wohnort: Nienburg / Weser

Re: screzeValid - APF&jQuery clientside form validator

Beitrag von MrNiceGuy » 10.10.2009, 10:04:22

Ich habe mal meinen schon etwas älteren RegEx an die aktuellen Gegebenheiten angepasst und ich denke, dass damit eine ordentliche Filterung möglich sein sollte. Allerdings ist es schwer NUR mit RegEx einen gültigen Domainnamen rauszufiltern. Man kann aber die Chancen verbessern:

Code: Alles auswählen

°^([\w\-]+(?:\.[\w\-]+)*)@((?:[a-z\d\-]*(?:\.[a-z\d\-]+)*)?[a-z][a-z\d\-]*[a-z\d]\.[a-z]{2,})$°i
Sieht vielleicht etwas wirr aus, aber im Grund arbeitet das alles ziemlich einfach. Wenn Bedarf an einer Erklärung besteht bitte nochmal melden, dann hole ich das nach, sobald ich Zeit dafür habe.
There are only 10 Types of people in the world:
Those who understand binary and those who don't.

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast