Я пытаюсь понять, почему сообщение, генерируемое jquery, меняет положение каждый раз, когда поле становится пустым!
Итак, если сообщение генерируется обратной связью ajax, оно помещается в правильное место, котороепрямо под окном входа в систему.Если поле (поле ввода) пусто при отправке, ajax-скрипт не вызывается, а сообщение о пустом поле отображается справа, но на 40 пикселей или более ниже.
Сценарий jquery:
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#loginform").submit(function(){
$('#loginform input[type=text]').each(function(n,element){
if ($(element).val()=='') {
$(".message").html('<p>O campo '+element.id+' tem de ter um valor!</p>').fadeIn("slow").delay(2000).fadeOut(1000);
return false;
}
else{
$.post("login.php", { usrname:$("#Nome").val(), passwd:$("#Palavra-passe").val()}, function(data){
if(data == '1'){
$("#subLog").hide();
$(".message").html('<p>Login efectuado com sucesso, a redirecionar...</p>').fadeIn("slow").delay(2000).fadeOut(1000, function (){
$("#login").fadeOut('slow', function(){
location.reload();
});
});
}
else{
$("#subLog").hide();
$(".message").html('<p>Erro! Tente novamente por-favor!</p>').fadeIn("slow").delay(1500).fadeOut(1000, function(){
$("#subLog").fadeIn('fast');
});
}
});
}
});
return false;
});
});
//-->
</script>
Стиль сообщения css:
.message{
text-align:center;
color: white;
background: rgba(0, 0, 0, .5);
margin-top: 65px;
padding: 4px;
font-weight: bold;
font-size: small;
border: 2px solid white;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
форма:
<div class="box" id="login" style="width: 326px; height: 228px; top: 39%; background-image: url('images/loginBox.png');background-repeat: no-repeat;">
<form id="loginform" action="" method="post">
<fieldset style="display: block">
<legend></legend>
<input id="Nome" class="transparent" type="text">
<input id="Palavra-passe" class="transparent" type="password">
<input id="subLog" type="submit" value="Login">
</fieldset>
</form>
<div class="message"></div>
ОБНОВЛЕНИЕ:
Кнопка отправки становится скрытой, когда ajaxИнструкция вызывается поэтому позиция меняется на 65px.Чтобы исправить эту небольшую проблему, я удалил свойство margin-top из правила css и изменил позицию с помощью .css ('margin-top', 'value').Таким образом, я изменяю значение для разных сообщений, и оба отображаются в одной и той же позиции на экране.Спасибо.