"Komplexere" Formular Validation Ã¼ber AJAX (inklusive Tests)

chrisbotor · February 13, 2009, 9:12am

Hallo,

ich arbeite gerade an einem Formular zum Anlegen eines neues Eintrages
und mÃ¶chte dies mittels AJAX noch vor der Speicherung auf eventuelle
Duplikate Ã¼berprÃ¼fen. Wir ein Ã¤hnlicher Eintrag gefunden, soll der
Nutzer darauf hingewiesen werden und auswÃ¤hlen, ob der gefundene Eintrag
ein Duplikat ist.

Die PrÃ¼fung sollte am besten noch vor dem Absenden des Formulars
stattfinden, damit sich der Nutzer im Zweifelsfall es sich sparen kann,
das gesamte restliche Formular auszufÃ¼llen. Sobald die fÃ¼r die
Validierung nÃ¶tigen Parameter (SSID, Adresse, PLZ/Ort) in das Formular
eingegeben wurde, soll die ÃœberprÃ¼fung stattfinden und darunter eine
Meldung ausgegeben werden, wenn ein Ã¤hnlicher Eintrag gefunden wurde.

Theoretisch mÃ¼sste ich ja die vier Felder per JavaScript Ã¼berwachen und
sobald in allen eine value vorhanden ist, dann einen Request (inklusive
der Inhalte aus den bis dahin ausgefÃ¼llten Felder) auf den Controller
mit der Validierung absetzen. Der Controller (mit Hilfe des Models) auf
Duplikate und gibt ggf. die Meldung zurÃ¼ck, welche per JS ins DOM
eingefÃ¼gt wird.

Das Absenden des Formulars an sich soll nicht Ã¼ber AJAX laufen, sondern
nur die Validierung(en). SpÃ¤ter prÃ¼ft dann der Controller zum Eintragen
der Daten, ob eine Validierung durchgefÃ¼hrt wurde. Wenn nicht (weil kein
JavaScript aktiviert war), wird die Validierung im Controller
durchgefÃ¼hrt und ggf. ein Fehler zurÃ¼ckgeliefert. ZusÃ¤tzlich mÃ¼ssten
hier noch ÃœberprÃ¼fungen stattfinden, ob ein Duplikat gefunden wurde und
ob der Nutzer eine Checkbox ausgewÃ¤hlt hat die besagt, dass der
gefundene Eintrag kein Duplikat ist.

Soweit sind derzeit meine theoretischen Grundgedanken zu dem Ablauf und
Realisierung des Szenarios. Ist dies mit Rails Boardmitteln mÃ¶glich oder
soll in den nÃ¶tigen JS-Code lieber gleich selber schreiben? Oder bin ich
ganz auf dem Holzweg mit meinen Gedanken? In den ganzen Rails BÃ¼chern
wird AJAX ja immer auf ganze Formulare angewendet. Bisher habe ich
leider noch kein Beispiel fÃ¼r eine Validierung eines einzelnen Feldes
(und in meinen Beispiel von eine Gruppe von Feldern) gefunden.

Gibt es in Rails eine MÃ¶glichkeit, dieses Szenario mittels Tests
(Functional und/oder Integration) abzudecken? Theoretisch mÃ¼sste ich ja
das AusfÃ¼llen eines “halben” Fomulares simulieren und Ã¼berprÃ¼fen, ob
bestimmte Ausgaben (z.B. der Hinweis) ausgegeben wurden.

Viele GrÃ¼ÃŸe,
Christian

chrisbotor · February 13, 2009, 9:30am

Hallo Christian… was fürn Aufwand…

vielleicht fragst du erst mal ein relevantes Feld ab. Dies kannst du
mit Ajax checken und füllen lassen.
Ist es schon vorhanden =>
a. message => Frage ja / nein
b. nach request wird der Rest aus der db geholt und die Felder
gefüllt / leeres Formular

Wäre das nicht sinnvoller…?

Gruß
Werner

Am 13.02.2009 um 09:12 schrieb Christian Beier:

chrisbotor · February 13, 2009, 10:12am

Hallo Werner,

fÃ¼r die Validierung brauche ich jedoch die vier Felder zusammenhÃ¤ngend,
damit die ÃœberprÃ¼fung zuverlÃ¤ssig funktioniert. Das ist ein
Zusammenspiel aller vier Felder.
Oder wie meinst du das genau?

Viele GrÃ¼ÃŸe,
Christian

Werner L. wrote:

Hallo Christian… was fï¿½rn Aufwand…

vielleicht fragst du erst mal ein relevantes Feld ab. Dies kannst du
mit Ajax checken und fï¿½llen lassen.
Ist es schon vorhanden =>
a. message => Frage ja / nein
b. nach request wird der Rest aus der db geholt und die Felder
gefï¿½llt / leeres Formular

Wï¿½re das nicht sinnvoller…?

Gruï¿½
Werner

Am 13.02.2009 um 09:12 schrieb Christian Beier:

chrisbotor · February 13, 2009, 10:34am

On Friday 13 February 2009, Christian Beier wrote:

Theoretisch müsste ich ja die vier Felder per JavaScript überwachen
und sobald in allen eine value vorhanden ist, dann einen Request
(inklusive der Inhalte aus den bis dahin ausgefüllten Felder) auf den
Controller mit der Validierung absetzen. Der Controller (mit Hilfe
des Models) auf Duplikate und gibt ggf. die Meldung zurück, welche
per JS ins DOM eingefügt wird.

Schau mal, ob dir dieses Plugin hilft

Google Code Archive - Long-term storage for Google Code Project Hosting.

Wie gut es ist, weiss ich nicht, weil ich es selbst nie verwendet habe.

Wenn du nicht auf Prototype.js festgelegt bist, hilft vielleicht auch
dieses

bassistance.de » jQuery plugin: Validation

Allerdings: Du solltest dich bei dieser Aufgabenstellung darauf
einstellen, dass es das ein oder andere Problem(chen) geben wird, zu
dessen Lösung du die beteiligten Bauteile verstehen musst.

Michael

–
Michael S.
mailto:[email protected]
http://www.schuerig.de/michael/

chrisbotor · February 14, 2009, 11:01am

Hallo Michael,

vielen Dank fÃ¼r die Links. Habe sie mir gestern Abend noch etwas
angeschaut und werde mich jetzt eingehender damit beschÃ¤ftigen. Gerade
das jQuery Plugin find ich gut, da ich das Rails Projekt eh schon auf
jQuery umgestellt habe (mit jQuery habe ich noch am meisten
“Erfahrung”).

Ich glaube die grÃ¶ÃŸte Schwierigkeit wird es sein, die vier Felder auf
Eingaben “zu Ã¼berwachen” um zum richtigen Zeitpunkt die Validierung
anzustoÃŸen und auch die Eingaben an den Rails-Controller zu Ã¼bertragen.

Von meinen Gedanken her liege ich richtig, oder? Also auch damit, eine
zusÃ¤tzliche “public” Methode im Controller zu definieren, die den
AJAX-Request entgegennimmt, mit dem Model verarbeitet und dann das
Ergebnis wieder zurÃ¼ck liefert. Oder gibt es dafÃ¼r in Rails eine
elegantere LÃ¶sung?

Viele GrÃ¼ÃŸe,
Christian

Michael S. wrote:

chrisbotor · February 14, 2009, 11:43am

On Saturday 14 February 2009, Christian Beier wrote:

Ich glaube die größte Schwierigkeit wird es sein, die vier Felder auf
Eingaben “zu überwachen” um zum richtigen Zeitpunkt die Validierung
anzustoßen und auch die Eingaben an den Rails-Controller zu
übertragen.

Bei jQuery bin ich da nicht auf der Höhe, bin aber sicher, dass es die
nötigen Mittel gibt. Grundsätzlich musst du Client-seitig drei
Teilprobleme lösen: (1) Erkennen, dass sich die relevanten Felder
geändert haben. (2) Ajax-Request mit den serialisierten Feldern. (3)
Anzeige des Validierungsergebnisses.

Dabei solltest du noch sicherstellen, dass nicht jeder Tastendruck einen
Request an den Server auslöst. Das kannst du mit einem Timer erreichen,
der bei jeder Änderung neu gestartet wird und daher erst dann auslöst,
wenn es zwar eine Änderung gab, sich aber eine bestimmte Zeit nichts
mehr geändert hat. Mit Prototype habe ich das in einem eigenen
Validator mal mit der angehängten Klasse gemacht.

Michael

Event.UserActionObserver = Class.create();

Event.UserActionObserver.ignoredKeys = [
Event.KEY_TAB,
Event.KEY_RETURN,
Event.KEY_ESC
];

Event.UserActionObserver.prototype = {
initialize: function(container, callback, options) {
this.options = Object.extend({
latency: 0.4,
events: [‘keypress’, ‘change’]
}, options);

this.container = $(container);
this.callback = callback;
this.latency = this.options.latency * 1000;
this.timer = null;
this.notifyCallback = this._notifyCallback.bind(this);
this.onAction = this._onAction.bindAsEventListener(this);
this.start();

},

start: function() {
var events = this.options.events;
for (var i = 0; i < events.length; i++) {
Event.observe(this.container, events[i], this.onAction);
}
},

stop: function() {
var events = this.options.events;
for (var i = 0; i < events.length; i++) {
Event.stopObserving(this.container, events[i], this.onAction);
}
},

_onAction: function(event) {
if (Event.UserActionObserver.ignoredKeys.include(event.keyCode)) {
return;
}
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(this.notifyCallback, this.latency);
},

_notifyCallback: function() {
this.callback();
}
};

–
Michael S.
mailto:[email protected]
http://www.schuerig.de/michael/

chrisbotor · February 19, 2009, 4:09pm

Hallo,

ich melde mich zurÃ¼ck mit einer Erfolgsmeldung und einer Frage zu meiner
oben genannten Problematik. Allerdings habe ich es mir bei der
ÃœberprÃ¼fung mit AJAX etwas einfacher gemacht und Ã¼berprÃ¼fe die vier
Felder immer nachdem diese verlassen wurden, ob alle benÃ¶tigten Felder
ausgefÃ¼llt wurden. Also nicht direkt bei der Eingabe. Auch die Anzeige
einer entsprechenden Meldung funktioniert und wird an der richtigen
Stelle eingefÃ¼gt.

Jetzt habe ich aber eine Frage zu der Realisierung dieser FunktionalitÃ¤t
(PrÃ¼fung auf Duplikate und Ausgabe einer Meldung mit den gefundenen
Duplikaten unter einem Feld) ohne JavaScript (Fallback-LÃ¶sung). Ich habe
es mir wie folgt vorgestellt:
Beim Abschicken des Formulars wird Ã¼berprÃ¼ft, ob die Validierung bereits
von der JS-LÃ¶sung durchgefÃ¼hrt wurde (mittels eines hidden Feldes). Wenn
nicht, soll die Action fÃ¼r die Validierung aufgerufen werden. Der fÃ¼r
mich etwas knifflige Teil kommt jetzt: Wenn ein Duplikat gefunden wurde,
soll der Nutzer wieder das Formular der “new”-Action angezeigt bekommen.
ZusÃ¤tzlich soll ein Partial (welches die Meldung enthÃ¤lt) an einer
bestimmten Stelle des Quellcodes eingeblendet werden.

Im Moment rufe ich die Action fÃ¼r die Validierung innerhalb der
“create”-Action auf:

def create
@test = Test.new(params[:test])

# Check duplicate
if @test[:checkDuplicate].blank?
  check_duplicate(@hotspot)

end

respond_to do |format|
  if @test.save
    flash[:notice] = 'Der Datensatz wurde erfolgreich gespeichert.'
    format.html { redirect_to(@test) }
    format.xml  { render :xml => @test, :status => :created,

:location => @test }
else
format.html { render :action => “new” }
format.xml { render :xml => @test.errors, :status =>
:unprocessable_entity }
end
end
end

Jetzt komme ich aber leider nicht weiter dass die “news”-Action mit dem
Partial angezeigt wird. Denn innerhalb der “create”-Action darf ich ja
nur einmal den render Befehl verwenden. Und wenn die ÃœberprÃ¼fung bereits
stattgefunden hat, soll ja weiterhin der restliche Code (Eintragung in
der Datenbank und je nach Ergebnis die show Seite angezeigt werden oder
das Formular mit den Fehlern) ausgefÃ¼hrt werden. Wisst ihr was ich
meine?

Viele GrÃ¼ÃŸe,
Christian