jquery Validierung Plug-in und Scrollen

Ich benutze die jquery Validierung Plug-in. Wenn ungültige Felder vorhanden sind, wird auf das erste ungültige Feld fokussiert. Meine Labels stehen jedoch über meinen Feldern und ich möchte nur ein wenig nach oben scrollen, damit der Benutzer sowohl das Label als auch das Feld sehen kann. Ich habe mir das Plug-In scrollTo angeschaut, aber ich habe noch keine einfache Möglichkeit gefunden, es zu integrieren. Vielleicht hat jemand so etwas schon einmal gemacht?jquery Validierung Plug-in und Scrollen

Quelle

2009-08-04 hiester

können Sie uns vielleicht zeigen, wie Sie das Scrollen bis jetzt machen? Sie sagen, dass es in Richtung des Eingabefelds scrollt, also gibt es bereits ein Scrollen an Ort und Stelle. – Sander

@sander Wenn der Fokus auf etwas außerhalb des Bildschirms gesetzt wird, wird der Browser gezwungen, mindestens so weit zu scrollen, dass das fokussierte Element sichtbar ist. das kann Browserimplementierung abhängig sein, obwohl – Kip

Ich benutze das jquery validierenplugin. Tatsächlich konzentriert es sich auf das erste ungültige Element. Wenn dieses Element außerhalb des Bildschirms angezeigt wird, scrollt es tatsächlich nur bis zu diesem Element (Eingabefeld), aber nicht höher. Es scrollt nicht, es springt nur sehr schnell zum Feld. Wenn es eine Schriftrolle gibt, ist es zu schnell, um wahrgenommen zu werden. – hiester

Ok, Sie haben also den Fokus verwendet, um zu Ihrem Element zu springen, bei dem die Validierung fehlgeschlagen ist.

Sie können diesen Code entfernen, da Sie versuchen, Scrollen auf dieses Element zu implementieren.

Diese Schritte müssen ausgeführt werden, um zum richtigen Element zu blättern.

Hinzufügen des ScrollTo-Plugins in Ihrem Kopf.
dafür sorgen, dass das Etikett (mit einer ID oder Klasse oder etwas) bereit ist (was in Ihrem Fall das Ziel ist, da man an die Stelle des Etiketts blättern möge, und das Eingabefeld nicht)
wenn Sie tun jetzt:

$ .scrollTo ('#yourlabelID', "langsam");

wird es auf die Position Ihres Etiketts rollen.

wie beim normalen Scrollen, wenn das Element zu nah am unteren Rand der Seite ist, scrollt es nur zum unteren Rand der Seite und nicht weiter.

Demo: http://sander.netcentric.be/test/scroll.html

Quelle

2009-08-04 14:44:33 Sander

Ich habe das implementiert. In der Datei jquery-validate.js, direkt bevor der Fokus auf das erste ungültige Element gesetzt wird, lege ich scrollTo auf die Bezeichnung dieses Elements. Es funktioniert gut in Firefox, aber nicht in IE. Ich denke, es ist ein Problem mit ScrollTo und IE. – hiester

Das Beispiel, das ich erstellt habe, scheint sowohl in IE als auch in Firefox auf meinem Computer zu funktionieren, also muss es etwas mit der Kombination validateplugin und scrollTo geben, nehme ich an. – Sander

hatte ich ein ähnliches Problem. Ich zeige meine Validierungsfehler in einer geordneten Liste über meinem Formular an, anstatt sie inline anzuzeigen. Wenn das Plugin jQuery validate einen Fehler findet, lege ich das Formular so fest, dass es zum Anfang des Formulars blättert, um den Benutzer über diesen Fehler zu informieren, indem die Funktion invalidHandler bearbeitet und die Option focusInvalid deaktiviert wird.

$("#residential-evaluation").validate({ 
// Scroll to top of #errors on validate 
invalidHandler: function(form, validator){ 
    $.scrollTo('#errors', "slow"); 
}, 
focusInvalid:false, 
//Error output 
errorLabelContainer: "#errors", 
wrapper: "li" 
});

Dieser Beitrag wurde wirklich auch nützlich:

overriding a function within the jquery validation plugin

Dieses Setup für die addierte Animation auf dem scrollTo Plugin basiert.

Quelle

2009-12-10 13:59:45

Wenn Sie Probleme mit IE und scrollTo haben, können Sie versuchen, ** window.location.hash = "Fehler"; ** –

Die ScrollTo-Setup wurde nur in IE8 und 7 getestet und scheint gut zu funktionieren, einschließlich Animation. –

jquery Validierung Plug-in und Scrollen

Antwort

Verwandte Themen