How to Shake Login Form element when invalid entry using jQuery UI

What Will I Learn?

You will learn how to create a login form on modal
You will learn how to use jQuery UI
You will learn how to add shake effect when invalid entry
You will learn how to modify shake effect

Requirements

Basic Knowledges about HTML
Basic Knowledges about jQuery
Basic Knowledges about JavaScript
You need to install or host jQuery and jQuery UI. You can also add CDN of jquery and jQuery UI if you dont want to install or host it.

Difficulty

Intermediate

Tutorial Contents

Shake is an effect from jQuery UI to shake an element of HTML. In this tutorial we will add shake effect on login Form element when invalid entry. For more detail, Lets pay attentions on steps bellow :

&Creating Login Form Element

Open your Text editor and create new file. Save as shake.html.
Add the HTML element as usual.

<html>
<head>
<title>Shake Form</title>
</head>
<body>
</body>
</html>

Create a panel

<div id="panel" style="width: 500px; height:auto; border: solid 1px">
</div>

Add username and password input on panel

Username : <input id="username" type="text"><br><br>
Password : <input id="pwd" type="password"><br><br>

Add a button under input

 <button id="submit">TEST</button>

&Adding jQuery and jQuery UI CDN

Because we don't want to install or host the jQuery and jQuery UI file, we should add The CDN as replacement.

jQuery UI is a part of jQuery, so to use jQuery UI we need to add jQuery CDN first. we have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit [jquery official web]https://code.jquery.com/). Add the CDN in <head> element.

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

Add the jQuery UI CDN. To get it more you can visit here

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

&Coding jQuery Script

To write the jQuery UI Script we should open <script> tag. You can put it in element or in <body> or in <head> element.

<script></script>

Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.

$(document).ready(function(){
});

Select the submit button then add the click event function :

$("#submit").click(function(){
});

Select the input and store it in variable

var user=$("#username").val();
var pwd=$("#pwd").val();

Create a condition to check the true or false entry. Here I just make a simple condition, you can modify it to check username and password on database.

if(user!="sogata"&&pwd!="1234"){
}

Add the shake effect as statement on previous condition

 $( "#panel" ).effect("shake");

Create an other statement when valid entry

else{
                    alert("the username and password is correct")
                }

&Running.

Save the file and try to run
The correct username and password here is sogata and 1234. Try to fill with the correct and uncorrect entry. when you fill invalid entry you will get your login form is shaked. and when valid, you will get the message that your entry is valid.

&Modify the shake effect

We can modify this shake effect like set the direction, distance, time to shake and duration. here the code

$( "#panel" ).effect( "shake", { direction: "right", times: 4, distance: 2}, 1000);

direction to Set the direction of the effect, It takes left, right, up, and down value. times to set how many time the shaking. distance to set the distance of shake, this is in px. 1000 this is the duration of shaking in milisecond.

&Full Code

<html>
    <head>
        <title>SHAKE FORM</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>
    <body>
        <center>
        <div id="panel" style="width: 500px; height:auto; border: solid 1px">
            <h3>LOGIN FORM</h3>
            Username : <input id="username" type="text"><br><br>
            Password : <input id="pwd" type="password"><br><br>
            <button id="submit">TEST</button>
        </div>
    </center>
    <script>
        $(document).ready(function(){
           
            $("#submit").click(function(){
                var user=$("#username").val();
                var pwd=$("#pwd").val();
                if(user!="sogata"&&pwd!="1234"){
                    $( "#panel" ).effect( "shake", { direction: "right", times: 4, distance: 2}, 1000);
                }
                else{
                    alert("the username and password is correct")
                }
                
            });
        });
    </script>
    </body>
</html>