web-dev-qa-db-fra.com

Lorsque le formulaire est validé, comment faire défiler jusqu'à la première erreur au lieu de sauter?

J'ai vu beaucoup de questions avec des variations sur ce thème, mais je cherche une solution simple:

Formulaire HTML, validation jQuery, plusieurs champs sont obligatoires. Lorsque le formulaire est soumis, la validation passe à la première erreur et la met en évidence. Pour augmenter la convivialité, je souhaite faire défiler jusqu'au premier champ d'erreur. Mais il continue à faire sauter la validation entièrement ou à jeter des erreurs scrollTo.

Je dois utiliser le plug-in de validation standard (http://docs.jquery.com/Plugins/Validation), mais tout scroller serait bien, même si j'avais essayé avec scrollTo (http://flesler.blogspot.com/2007/ 10/jqueryscrollto.html).

Le code exemple est à http://jsfiddle.net/DtgKQ/1/ , toute aide est la bienvenue.

jqueryjquery-validatescrollto
44
Heraldmonkey

Voici ce que vous pouvez faire:

  • Par défaut, le plugin validate concentre le premier élément erroné (s'il y en a un). Désactivez l'option focusInvalid en la définissant sur false.

  • Le gestionnaire callback invalidHandler est exécuté lorsque le formulaire est invalide. Le deuxième paramètre validator permet d’accéder à l’objet validateur et donc au tableau errorList. Vous pouvez ensuite animer le parchemin par rapport au premier élément erroné.

Voici le code:

$("#commentForm").validate({
    focusInvalid: false,
    invalidHandler: function(form, validator) {

        if (!validator.numberOfInvalids())
            return;

        $('html, body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top
        }, 2000);

    }
});

DÉMO

112
Didier Ghys

Je n'aime pas toutes les extensions jQuery, voici donc ma solution à ce problème:

if ($('#MYID').valid()) {
      //dosomething();
} else {
    $('html, body').animate({
         scrollTop: ($('.error').offset().top - 300)
    }, 2000);
}
10
Thomas

ajoutez simplement ce code à vos thèmes javascript:

(function($) {
$(document).ready(function(){
    //bmo scroll to not valid
    $(".wpcf7").on('invalid.wpcf7',function(e){
        $('html, body').animate({
                scrollTop: $(".wpcf7-not-valid").first().offset().top-30
            }, 2000);
    });

});
})(jQuery);
7
user3629980

Peut-être pourriez-vous vérifier quelle entrée a échoué et prendre sa position (en haut) et utiliser jQuery scrollTop

$(window).scrollTop(errorPosition)

Il semble que l'obtention de chaque champ d'erreur n'est pas très facile à obtenir (du moins pour moi).

Recherchez errorPlacement dans la documentation du plug-in de validation . Voici un exemple pour obtenir chaque champ d'erreur.

1
Tx3
  $("#create-form").validate({ // Set Focus on first invalid input
    focusInvalid: false,
    invalidHandler: function() {
      $(this).find(":input.error:first").focus();
      }
  });
0
sathyakrishnapalani