Jquery – css "transform: scale" affecte ".offset () 'de jquery

J'essaie de faire la validation dans jQuery.

Il produira une erreur après l'apparition d'un événement blur en vérifiant si l' input donnée est vide. En fonction de cela, il créera un <div class="errdiv"> côté de cette input qui aura l'erreur spécifique. J'utilise .offset pour obtenir la position de cette input spécifique à la position .errdiv là-bas.

CSS:

 .inpt { width:500px; height:50px; background:#eee; color:#444; border:2px solid #ddd; padding:5px; transition: all ease 1s; border-radius:5px; outline:none; } .inpt:focus { background:#fff; color:#222; border:2px solid #000; } .err { background:pink; border:2px solid #f00; color:#a00; } .errdiv { position:absolute; top:0px; left:0px; height:30px; display:inline-block; padding:5px; border-radius:5px; background:#a00; border:1px solid #a44; color:#fff; text-align:center; font-weight:bolder; visibility:visible; opacity:0; } 

JS:

• Comment créer un diaporama simple avec javascript?
• Comment déclencher CSS3 fade-in effect en utilisant Javascript?
• Qu'est-ce que l'index z par défaut de l'élément <div> en HTML, et comment l'utiliser en utilisant JavaScript?
• Animating marginLeft avec jQuery
• Mettre javascript et css en ligne dans un seul fichier html minifié pour améliorer les performances?

 $(document).ready(function(){ $(".inpt").blur(function(){ // Check Input for validation. $(".errdiv").remove(); //Remove Any Previous Error. var vl=$(this).val(); var vl1=vl.split(" ").join(""); if(vl==""||vl1==""){ // Input is Empty Mark It red. $(this).addClass("err"); } }); $(".inpt").focus(function(){ //Check Whether Input is marked Red or Not (hasClass) err? $(".errdiv").remove(); //Remove Any Previous Error. if($(this).hasClass("err")){ // Input is Marked! $(this).removeClass("err"); var tp=$(this).offset().top+12; var lf=$(this).offset().left+$(this).width()+12; // Add Error Div and appropriate Message. $("body").append("<div class='errdiv' style='position:absolute;top:"+tp+"px;left:"+lf+"px;'>*This is Required.</div>"); $(".errdiv").animate({ "visibility":"visible", "opacity":"1" },1000); //Show What is The Error? }); }); 

HTML:

 <center>Hello Every One!</center> <hr> <center> <input class="inpt" placeholder="name" type="text" /><br /> <input class="inpt" placeholder="email" type="text" /><br /> <input class="inpt" placeholder="password" type="password" /><br /> </center> <center> Just Try Focusing and Bluring the Inputs </center> 

Et ça marche bien. Vous pouvez le tester ici .

Comme vous pouvez le voir, il crée une erreur <div> et l'affiche comme suit:

.

Problème réel

Le problème se produit lorsque j'essaie d' scale(zoom) ma page pour les malvoyants et / ou pour les écrans vraiment grand écran, en utilisant:

 body{ /*mozilla hack*/ -moz-transform: scale(1.25,1.25); /* Chrome and Safari */ -webkit-transform: scale(1.25,1.25); /*IE */ -ms-transform:scale(1.25,1.25); /*Opera*/ -o-transform:scale(1.25,1.25); /*Others*/ transform:scale(1.25,1.25); } 

Ensuite, je ne sais pas ce qui se passe. Mais les choses sont terriblement fausses. Le .offset() ne semble pas fonctionner correctement. Vous pouvez le voir ici .

L'erreur div maintenant se positionne comme suit:

Quelqu'un peut-il me dire comment positionner .errdiv correctement même après avoir mis à l' scaling la page ?

Qu'est-ce que je fais mal?

Toutes les suggestions ou idées sont les bienvenues. J'espère que vous allez m'aider bientôt. Merci d'avance :).

PS:

 transform-origin: 0 0; 

Ne m'a pas aidé. Et je ne veux pas utiliser <table><td> ou écrire div précédemment en HTML Je veux l'ajouter dynamiquement.

Edit For Bounty

La solution que j'ai acceptée est correcte pour la partie de validation, mais Maintenant, j'essaie de l'implémenter avec ajax, où le contenu sera ajouté dynamiquement à la div, et je devrai ajouter une transition:all ease 2.0s au body 'S css pour rendre les choses fantastiques. Mais après avoir ajouté une trasition qui affecte la nature de la transform qui est modifiée par la solution acceptée (la transformation est également animée). Et cela ne résout pas le problème du positionnement. Y a-t-il une meilleure façon de satisfaire le besoin? Quelqu'un peut-il fournir une solution de navigateur croisé?

• Placez le curseur à la fin de la valeur de l'entrée de texte
• En-tête corrigé en mode défilement
• Comment définir Twitter Bootstrap class = erreur basée sur la classe d'entrée AngularJS = ng-invalid?
• JavaScript obtient une transformation matricielle à partir de CSS réguliers et convertit matrix2D en matrix3D
• Redimensionner le contenu de la page en fonction d'une page imprimée

 var lf=$(this).offset().left+$(this)[0].getBoundingClientRect().width+12; 

 var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/; var matches =$("body").css('transform').match(matrixRegex); 

 $("body").css('transform', 'scale(' + '1' + ')'); 

  $("body").css('transform', 'scale(' + matches[1] + ')'); 

 $("body").css('transform', 'scale(' + '1' +',' +'1' + ')'); 

 .inpt:focus { background:#fff; color:#222; border:2px solid #000; } .err { background:pink; border:2px solid #f00; color:#a00; } .errdiv { position:absolute; height:30px; display:inline-block; padding:5px; border-radius:5px; background:#a00; border:1px solid #a44; color:#fff; text-align:center; font-weight:bolder; visibility:visible; opacity:0; } 

 <center>Hello Every One!</center> <hr> <center> <input class="inpt" placeholder="name" type="text" /><br /> <input class="inpt" placeholder="email" type="text" /><br /> <input class="inpt" placeholder="password" type="password" /><br /> </center> <center> Just Try Focusing and Bluring the Inputs </center> 

 $(document).ready(function() { $(".inpt").blur(function() { // Check Input for validation. $(".errdiv").remove(); //Remove Any Previous Error. var vl = $(this).val(); var vl1 = vl.split(" ").join(""); if (vl == "" || vl1 == "") { // Input is Empty Mark It red. $(this).addClass("err"); } }); $(".inpt").focus(function() { //Check Whether Input is marked Red or Not (hasClass) err? // $(".errdiv").remove(); //Remove Any Previous Error. if ($(this).hasClass("err")) { // Input is Marked! $(this).removeClass("err"); // var tp=$(this).offset().top+12;// not needed // var lf=$(this).offset().left+$(this).width()+12;// not needed // // Add Error Div and appropriate Message. $('<div class="errdiv">*This is Required.</div>').insertAfter(this); $(".errdiv").animate({ "visibility": "visible", "opacity": "1" }, 1000); //Show What is The Error? } }); });