入力が期待どおりである場合にうまく機能するドロップダウンログインボックスがあります。以前は別のログイン ページがあり、パスワードなどが正しくない場合、メッセージが表示されました。
現在、ドロップ ダウン ログインでは、エラーが発生した場合にページが更新され、ドロップ ダウンが非アクティブ状態 (非表示) に戻り、再度ログインを選択した場合にのみエラーが表示されます。
例えば:
間違ったユーザー名を入力して [送信] をクリックした場合。現在表示しているページが更新され、正常に表示されます。次にログインボックスをもう一度クリックすると、フォームがドロップダウンし、ユーザー名が無効であるというエラーメッセージが表示されます。
検証は PHP を介して行われ、ドロップダウンは jQuery を介して行われます。
完璧なドロップダウンログインボックスを実現するのを手伝ってくれる人はいますか? :) エラーが入力されたときにボックスがダウンしたままになり、正しくログインしたときまたはキャンセルされたときにのみ消えるように、目に見える更新がまったくないようにしたいと思います。
jQuery 関数:
//Displaying the login dropdown menu
$(document).ready(function(){
$('#loginTrigger').click(function(){
$(this).next('#loginContent').slideToggle();
})
});
ありがとう
編集:
要求に応じてフォーム コードで更新
<nav class = "memberHeaderArea">
<ul>
<li id="login">
<a id="loginTrigger" href="#">Login<span class="unlock icon"></span></a>
<div id="loginContent">
<?php if(empty($errors) === false){
echo '<p>' .implode('</p<p>', $errors).'</p>';
}
?>
<form method="post" action="" id="ourLoginFormID_JS">
<div class="ourContactFormElement2">
<label for="username">Username:</label>
<input type="text" name="username" autocomplete="off" class="required" value="<?php if(isset($_POST['username'])) echo htmlentities($_POST['username']); ?>" />
</div>
<div class="ourContactFormElement2">
<label for="password">Password:</label>
<input type="password" name="password" autocomplete="off" class="required"/>
</div>
<div class="ourContactFormElement2">
<label> </label>
<input type="submit" name="submit" value="Login!" />
</div>
</form>
<form action="confirmRecovery.php">
<input type="submit" name="forgotPass" id="forgotPass" value="Forgotten Password?">
</form>
</div>
</li>
<li>
<a href="userRegister.php">Register<span class="adduser icon"></span></a>
</li>
</ul>
</nav>