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

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

您可以为此使用 jquery shake 效果。

首先，确保您将最新的 jquery js 文件链接到您的网页，然后是 jquery-ui 文件，如下所示：

<script src="path-to-your-jquery/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

那么，

只需将您的输入框包装在这样的 div 中：

<div class="shakeInput">
  input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="20" />
</div>

然后像这样使用jquery：

$( ".shakeInput" ).effect( "shake" );

您必须为摇晃添加正确的if statements，就像您使用上面的红色背景颜色一样。

Answer 2

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>

Answer 3

有一个不错的跨浏览器 CSS 动画库https://github.com/daneden/animate.csscss animation by daneden。另外，使用 jquery 让生活更轻松。