我有这个 Javascript 和 HTML 代码:
<script>
window.onload = function() {
function validate(e) {
var username = document.getElementById('username');
if (username.value.trim() == '') {
username.style.backgroundColor = '#ff4c4c';
e.preventDefault();
} else {
username.style.backgroundColor = null;
}
var password = document.getElementById('password');
if (password.value.trim() == '') {
password.style.backgroundColor = '#ff4c4c';
e.preventDefault();
}else {
password.style.backgroundColor = null;
}
}
document.getElementById('login').addEventListener('submit', validate);
}
</script>
<div id="navrow">
<img style="float: left;" src="questerslogoresized.png" />
<ul>
<li>Register</li>   </li>
<li>About</li>   </li>
<li>Reviews</li>   </li>
<form id='login' action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>
<div style="position: absolute; right: 120px;">
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="20" />
<span id='login_username_errorloc' class='error'></span>
<input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
<span id='login_password_errorloc' class='error'></span>
</div>
<input type='submit' name='Submit' value='Submit' />
<!--<div class='short_explanation'><a href='reset-pwd-req.php'>Forgot Password?</a></div>-->
<div><span style='color: #fff; position: absolute; top: 55px; right: 398px;'><?php echo $fgmembersite->GetErrorMessage(); ?></span></div>
</div>
</form>
</ul>
当前如果文本框输入为空,则其颜色变为红色。我正在寻找如何制作空盒摇动。
感谢帮助,谢谢!
最佳答案
window.onload = function () {
function validate(e) {
var username = document.getElementById('username');
if (username.value.trim() == '') {
username.style.backgroundColor = '#ff4c4c';
// Add a class that defines an animation
username.classList.add('error');
// remove the class after the animation completes
setTimeout(function() {
username.classList.remove('error');
}, 300);
e.preventDefault();
} else {
username.style.backgroundColor = null;
}
var password = document.getElementById('password');
if (password.value.trim() == '') {
password.style.backgroundColor = '#ff4c4c';
// Add a class that defines an animation
password.classList.add('error');
// remove the class after the animation completes
setTimeout(function() {
password.classList.remove('error');
}, 300);
e.preventDefault();
} else {
password.style.backgroundColor = null;
}
}
document.getElementById('login').addEventListener('submit', validate);
}
.error {
position: relative;
animation: shake .1s linear;
animation-iteration-count: 3;
}
@keyframes shake {
0% { left: -5px; }
100% { right: -5px; }
}
<form id='login' action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>
<input type='text' name='username' class="formlogin" placeholder='Username' id='username' maxlength="20" />
<input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
<input type='submit' name='Submit' value='Submit' />
</form>
关于javascript - 如果为空,则摇动文本输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30652207/