Shake Text Input if Empty

Question

I have this Javascript and HTML code:

<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>

Currently if the text box input is empty, the colour of it changes to red. I'm looking for how to also make an empty box shake.

Help is appreciated, thanks!

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>

Answer 2

You can use jquery shake effect for that.

First, make sure you link the latest jquery js file to your webpage followed by the jquery-ui file after like this:

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

then,

Just wrap your input box in a div like this:

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

And then use jquery like this:

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

You will have to add proper if statements for the shake just like you did with the red background-color above.