title: On Button click pop up is opening
body: <p>I have a scenario where I want to validate a <code>textbox</code> on <code>button</code> click. What I want is</p>
  
  <p>I have a <code>textbox</code> and <code>button</code> if user doesnt enter any value in the textbox and click on button it should prompt a message as enter the details. Its happening till here.</p>
  
  <p>But at the same time the pop up is also opening even if the user has not enter any details. SO I want it to stop. Below is my code which I tried.</p>
  
  <pre><code>&lt;input type="text" name="search" id="txtStoreCode" /&gt;
  &lt;input type="button" value="View Details" id="viewDetails" class="headButt" onclick="getStoreInfo();" /&gt;
  </code></pre>
  
  <p>Pop Up which is opening.</p>
  
  <pre><code>$('#viewDetails').on('click', function() {
      $("#storeCodeDialog").dialog({
          width: 'auto',
  
      });
  
      $("div[aria-describedby='storeCodeDialog'] .ui-dialog-title").text('3328');
  
      $('div[aria-describedby="storeCodeDialog"]').css({
          'left': '18px',
          'top': '103px'
      });
  
  });
  </code></pre>
  
  <p>And my function to validate is below</p>
  
  <pre><code>var STORE_ID = $('#txtStoreCode').val();
  if (STORE_ID == "" || STORE_ID == null) {
      jAlert('Kindly enter Store Id', 'INFORMATION');
      $('#storeCodeDialog').hide();
      return false;
  }
  </code></pre>
  
  <p>I tried with <code>hide()</code> but still the pop up is opening how to stop it.</p>