title: Add class on button click using javascript
body: <p>I  am trying to check the username is available or not using button click event in javascript but when the user hits directly the button without entering anything in the textbox it's showing me as available.</p>
  
  <p>So I want to make as "please enter some text" message when the user doesn't enter anything in the textbox and hits the button.
  So how do I do that?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $("#&lt;% =btnavailable.ClientID %&gt;").click(function () {
              $("#dvMsg").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
              $.post("LoginHandler.ashx", { uname: $("#&lt;% =txtUserName.ClientID %&gt;").val() }, function (result) {
                  if (result == "1") {
                      $("#dvMsg").html('Already exists!').addClass('messageboxerror').fadeTo(900, 1);
                  }
                  else if (result == "0") {
                      $("#dvMsg").html('Available').addClass('messageboxok').fadeTo(900, 1);
                  }
                  else {
                      $("#dvMsg").html("Error!").addClass('messageboxerror').fadeTo(900, 1);
                  }
              });
  
          });
          $("#&lt;% =btnavailable.ClientID %&gt;").ajaxError(function (event, request, settings, error) {
              alert("Error requesting page " + settings.url + " Error:" + error);
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is my Css:</p>
  
  <pre><code>&lt;style&gt;
     .messagebox {
         position:absolute;
         width:100px;
         margin-left:30px;
         border:1px solid #c93;
         background:#ffc;
         padding:3px;
     }
     .messageboxok {
         position:absolute;
         width:auto;
         margin-left:30px;
         border:1px solid #349534;
         background:#C9FFCA;
         padding:3px;
         font-weight:bold;
         color:#008000;
     }
     .messageboxerror {
         position:absolute;
         width:auto;
         margin-left:30px;
         border:1px solid #CC0000;
         background:#F7CBCA;
         padding:3px;
         font-weight:bold;
         color:#CC0000;
     }
     #dvMsg {
         height: 15px;
         width: 142px;
         z-index: 1;
         left: 172px;
         top: 126px;
         position: absolute;
     }
  &lt;/style&gt;
  </code></pre>