Jquery - css "transform: scale" влияет на .offset() "jquery

Я пытаюсь выполнить проверку в jQuery.

Он выдает ошибку после события blur, проверяя, является ли данный input пустым. Исходя из этого, он создаст <div class="errdiv"> рядом с тем input, который будет иметь конкретную ошибку. Я использую .offset, чтобы получить положение этого конкретного input для размещения там .errdiv.

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:

$(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>

И он отлично работает. Вы можете протестировать его здесь.

Как вы видите, это создает ошибку <div> и отображает ее следующим образом:

.

Актуальная проблема

Проблема возникает, когда я пытаюсь выполнить scale(zoom) мою страницу для людей с ослабленным зрением и/или для действительно больших экранных дисплеев, используя:

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);
} 

Тогда я не знаю, что произойдет. Но все идет ужасно неправильно. .offset() не работает должным образом. Вы можете увидеть его здесь.

Ошибка div теперь позиционируется как:

Может ли кто-нибудь сказать мне , как правильно позиционировать .errdiv даже после scaling страницы?

Что я делаю неправильно?

Любые предложения или идеи приветствуются. Надеюсь, вы все скоро мне поможете. Заранее спасибо:).

transform-origin: 0 0;

мне не помог. и Я не хочу использовать <table><td> или писать div ранее в HTML Я хочу добавить его динамически.

Изменить для Bounty

Решение, которое я принял, хорошо для части проверки, но теперь я пытаюсь реализовать ее с помощью ajax, где содержимое будет динамически добавляться в div, и я должен добавить transition:all ease 2.0s в body css, чтобы некоторые вещи выглядели потрясающе. Но после добавления trasition, который влияет на характер transform, который изменяется принятым решением (преобразование также становится анимированным). и это не решает проблему позиционирования. Так есть ли лучший способ удовлетворить эту потребность? Может ли кто-нибудь предоставить решение для перекрестного браузера?

Ответы

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?
        }
    });
});