Я пытаюсь выполнить проверку в 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
страницы?
Что я делаю неправильно?
Любые предложения или идеи приветствуются. Надеюсь, вы все скоро мне поможете. Заранее спасибо:).
PS:
transform-origin: 0 0;
мне не помог. и Я не хочу использовать <table><td>
или писать div
ранее в HTML
Я хочу добавить его динамически.
Изменить для Bounty
Решение, которое я принял, хорошо для части проверки, но теперь я пытаюсь реализовать ее с помощью ajax, где содержимое будет динамически добавляться в div, и я должен добавить transition:all ease 2.0s
в body
css, чтобы некоторые вещи выглядели потрясающе. Но после добавления trasition
, который влияет на характер transform
, который изменяется принятым решением (преобразование также становится анимированным). и это не решает проблему позиционирования. Так есть ли лучший способ удовлетворить эту потребность? Может ли кто-нибудь предоставить решение для перекрестного браузера?