jquery validation plug-in und scrollen

Bin ich mit dem jquery-validation-plug-in. Wenn es ungültige Felder, Sie konzentriert sich auf das erste Feld mit Fehler. Aber, meine Etiketten sind auf meine Felder und ich möchte, um einen Bildlauf nach oben, nur ein wenig, so dass der Benutzer sehen kann, sowohl die label und Feld. Ich habe die scrollTo-plug-in, aber habe noch nicht herausgefunden, eine einfache Möglichkeit zu integrieren. Vielleicht hat jemand etwas getan, wie dies vor?

  • kannst du vielleicht zeigen Sie uns, wie Sie die Bildlauf bis jetzt? Sie sagen, es scrollt in Richtung inputfield, so gibt es bereits einige scrollen im Ort.
  • festlegen des Fokus auf etwas off-screen zu zwingen, den browser zu scrollen, zumindest weit genug, dass das fokussierte element zu sehen ist. das kann browser-Implementierung abhängig, obwohl
  • Ich verwende das jquery validate plugin. In der Tat, es konzentriert sich auf die ersten ungültiges element. Wenn das element, wenn off-screen, es ist in der Tat scrollen nur bis zu diesem element (Eingabefeld), aber nicht höher. Es muss nicht scrollen, es nur springt sehr schnell auf das Feld. Wenn es eine schriftrolle, es ist zu schnell, um wahrgenommen zu werden.
InformationsquelleAutor hiester | 2009-08-04
  1. 2

    Hatte ich ein ähnliches Problem. Ich bin Anzeige mein Fehler bei der überprüfung ist in einer geordneten Liste über meine form nicht inline angezeigt werden. Wenn das jQuery validate plugin einen Fehler findet, ich habe die form, um einen Bildlauf zum oberen Rand der form um den Benutzer zu Benachrichtigen, dass der Fehler(s) durch Bearbeiten der invalidHandler Funktion und deaktivieren der focusInvalid option.

    $("#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 war wirklich nützlich:

    übergeordnete Funktion innerhalb der jquery-validation plugin

    Dieses setup setzt auf die scrollTo-plugin für diese zusätzliche animation.

    • Wenn Sie Probleme mit IE und scrollTo Sie könnten versuchen, mit - Fenster.Lage.hash="Fehler";
    • Die scrollTo-setup wurde nur getestet in IE8 und 7 und scheint gut zu funktionieren, die animation enthalten.
    InformationsquelleAutor Kevin Leary
  2. 0

    Ok, so dass Sie den Schwerpunkt zu springen, um Ihr element, die die Prüfung nicht bestanden.

    können Sie entfernen Sie diesen code, da Sie versuchen werde umzusetzen scrollen hin, dass element.

    diese Schritte müssen unternommen werden, um zu Blättern, um das richtige element.

    1. hinzufügen das scrollTo-plugin in deinem Kopf.
    2. sicherstellen, dass das label bereit ist (mit einer ID oder Klasse oder so) (die in Ihrem Fall ist das Ziel, da Sie einen Bildlauf durchführen möchten, um die Position der Beschriftung und nicht das input-Feld)

    3. wenn Sie jetzt tun:

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

    wird es Rollen, um die position der label.

    wie beim normalen scrollen, wenn das element ist zu nah am unteren Rand der Seite, es wird nur einen Bildlauf zum Ende der Seite und nicht weiter.

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

    • Ich implementierte diese. In der jquery-validate.js, rechts, bevor es legt den Fokus auf das erste ungültige element, setze ich das scrollTo der label-fo-element. Es funktioniert Super im Firefox, aber nicht im IE. Ich denke es ist ein problem mit scrollTo und IE.
    • das Beispiel, das ich erstellt scheint zu funktionieren, sowohl im IE und firefox auf meinem Rechner, es muss also etwas mit der validateplugin und scrollTo Kombination, nehme ich an.
    InformationsquelleAutor Sander
Schreibe einen Kommentar