How to use the Jquery Shake effect on Button click?

Question

What i want to do is to shake the textbox if the textbox is empty. But i a unable to do this. What i am doing is as follows :

$("#BtnSubmit").click(function() {
              if ($("#txt1").val() == '' || $("#TextBox1").val() == '' || $("#TextBox2").val()) {
                  $("#txt1").effect("shake")

              }

          });

<div id="keepTextBox">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <asp:TextBox ID="txt1" ForeColor="White" runat="server" Height="30px" Style="background-color: #46375E;"></asp:TextBox>&nbsp;&nbsp;
              <asp:RequiredFieldValidator ControlToValidate="txt1" ID="rftxt1" runat="server" SetFocusOnError="true"></asp:RequiredFieldValidator>
              <asp:TextBox ID="TextBox1" ForeColor="White" runat="server" Height="30px" Style="background-color: #46375E"></asp:TextBox>&nbsp;&nbsp;
              <asp:RequiredFieldValidator ControlToValidate="TextBox1" ID="rfTextBox1" runat="server"
                  SetFocusOnError="true"></asp:RequiredFieldValidator>
              <asp:TextBox ID="TextBox2" runat="server" ForeColor="White" Height="30px" Style="background-color: #46375E"></asp:TextBox>&nbsp;&nbsp;
              <asp:RequiredFieldValidator ControlToValidate="TextBox2" ID="rfTextBox2" runat="server"
                  SetFocusOnError="true"></asp:RequiredFieldValidator>
              <asp:Button ID="BtnSubmit" runat="server" Width="15%" Text="SIGN UP" ForeColor="White"
                  Style="background-color: #49A7E4; cursor: pointer;" Height="40px" /></div>
      </div>

Answer 1

You have to include jquery UI as dependency along with jquery to get the shake effect.

$("#txt1").click(function() {
  $(this).effect( "shake" );
});

<button id="txt1">shake it</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

OR

if you dont want to include Jquery UI, then you will have to implement it as seen in this answer on SO.

$("#txt").click(function(){

  $(this).shake();

});

<button id="txt">shake it</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
  
    intShakes = intShakes || 10;
    intDistance = intDistance || 2;
    intDuration = intDuration || 1000;
  
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
return this;
};
</script>