如果为空，则摇动文本输入

Question

我有这个 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>&nbsp&nbsp&nbsp</li>
        <li>About</li>&nbsp&nbsp&nbsp</li>
        <li>Reviews</li>&nbsp&nbsp&nbsp</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>

目前，如果文本框输入为空，则其颜色变为红色。我正在寻找如何使空盒子摇动。

感谢帮助，谢谢！

Answer 1

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>