title: Jquery is not working properly in asp.net AsyncPostBackTrigger
body: <p>net.</p>
  
  <p>Recently I have tried to validate some asp controls with my jquery functions in the content page.</p>
  
  <p>Below I have given some code where i want to validate one dropdown list which will check that
  the selected Index of the dropdown list is 0. If it is zero then the background of the dropdown list
  will be red. Else it will remain same.</p>
  
  <p>The other Control is TextBox. In the same way if the textbox's length is 0 then the backround color will 
  be red.</p>
  
  <p>When the save button will be clicked the validation will start.</p>
  
  <p>Here I have given all the necessary code in jquery.</p>
  
  <p>But the problem is when I click the Save Button then both Dropdown and Textbox turns red for a certain time(1 or 2 sec)
  then turns into white background automatically. </p>
  
  <pre><code>    &lt;asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"   runat="server"&gt;
  &lt;script&gt;
      $(document).ready(function () {
          var valid = 0;
  
          // check all fields validity when "Save" Button clicked
          $("#&lt;%= btnSave.ClientID%&gt;").bind("click", function () {
               var validity = validateAllFields();
               if (validity == false) {
                   return false;
               }
               else {
               }
           });
      });
  
      /// validating all fields
      // if all fields are valid then return true else return false//
      function validateAllFields() {
          var nValid = 0;
          //validate DropDown box
          nValid += checkDropdownList($("#&lt;%= ddl1.ClientID%&gt;")); // check ddl1 is Selected or not
  
          //validate Text Field
          nValid += checkTBLength($("#&lt;%= tb1.ClientID%&gt;"), 1); // check "tb1" length
          if (nValid &gt; 0) {
              return false;
          }
          else {
              return true;
          }
      }
  
  // check whether the dropdownlist is selected other than "Select Item"
  // parametes- idDropdown= id the of the dropdown List
  function checkDropdownList(idDropdown) {
      // check if the dropdown selected index is 0 or not
      // if zero then set the background color red
      if ($(idDropdown).prop('selectedIndex') == 0) {
          $(idDropdown).css("background-color", "red").trigger("change"); // set dropdownlist background color to red
          return 1;
      }
      else { // set the background color white
          $(idDropdown).css("border-color", "");
          return 0;
      }
  }
  
  /// check minimum required length of the textbox
  // Parameters-  idTextbox= id of the textbox, minLength= minimum Required Length
  function checkTBLength(idTextbox, minLength) {
      //check if the textbox's lenth is less than minimum Required Length or not
      if ($(idTextbox).val().length &lt; minLength) {
          $(idTextbox).css("background-color", "red"); // set the background textbox color to red
          return 1; // return 1 for validation failed
      }
      else {
          $(idTextbox).css("background-color", "white");// set the background textbox color to red
          return 0; // return 1 for validation passed
      }
  }
  
  &lt;/script&gt;
  
  
  &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;/asp:ScriptManager&gt;
  &lt;div class="form-group"&gt;
      &lt;asp:UpdatePanel ID="UP1" runat="server"&gt;
          &lt;ContentTemplate&gt;
              &lt;asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true"&gt;
                  &lt;asp:ListItem Selected="true"&gt;Select&lt;/asp:ListItem&gt;
              &lt;/asp:DropDownList&gt;
          &lt;/ContentTemplate&gt;
          &lt;Triggers&gt;
              &lt;asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" /&gt;
          &lt;/Triggers&gt;
      &lt;/asp:UpdatePanel&gt;
  &lt;/div&gt;
  
  &lt;div class="span4"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="pwd"&gt;Query Details&lt;/label&gt;
          &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
              &lt;ContentTemplate&gt;
                  &lt;asp:TextBox ID="tb1" runat="server" TextMode="MultiLine" MaxLength="500" class="form-control" Rows="4" Width="100%"&gt;&lt;/asp:TextBox&gt;
              &lt;/ContentTemplate&gt;
              &lt;Triggers&gt;
                  &lt;asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" /&gt;
              &lt;/Triggers&gt;
          &lt;/asp:UpdatePanel&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-info" OnClick="btnSave_Click" /&gt;
  &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>Note that I have used AsyncPostBackTrigger in both controls.</p>
  
  <p>Can you please mention why this is happening and how to resolve it.</p>
  
  <p>Thank You.</p>