寻找一种方法停留在登录表单页面上,直到输入的凭据被验证或被拒绝,然后相应地采取行动(请参阅JavaScript)。参考this CodePen。
登录表格
<div class="background-wrap">
<div class="background"></div>
</div>
<form id="accesspanel" action="login" method="post">
<h1 id="litheader">AECEND</h1>
<div class="inset">
<p>
<input type="text" name="username" id="email" placeholder="Email address">
</p>
<p>
<input type="password" name="password" id="password" placeholder="Access code">
</p>
<div style="text-align: center;">
<div class="checkboxouter">
<input type="checkbox" name="rememberme" id="remember" value="Remember">
<label class="checkbox"></label>
</div>
<label for="remember">Remember me for 14 days</label>
</div>
<input class="loginLoginValue" type="hidden" name="service" value="login" />
</div>
<p class="p-container">
<input type="submit" name="Login" id="go" value="Authorize">
</p>
</form>
的JavaScript
$(document).ready(function() {
var state = false;
//$("input:text:visible:first").focus();
$('#accesspanel').on('submit', function(e) {
e.preventDefault();
state = !state;
if (state) {
document.getElementById("litheader").className = "poweron";
document.getElementById("go").className = "";
document.getElementById("go").value = "Initializing...";
}else{
document.getElementById("litheader").className = "";
document.getElementById("go").className = "denied";
document.getElementById("go").value = "Access Denied";
}
});
})