title: Display Error Message For Select If Expand Then Closed Without Selection Made In JQuery
body: <p>I have a <code>select</code> and i'm after displaying an error message as soon as the user expands the <code>select</code> and closes it without making a selection but i cant figure how to do this.</p>
  
  <p>I have it validating <code>on.change</code> if the <code>val</code> matches the default as shown below</p>
  
  <p><strong>Working JQuery When An Option Is Selected</strong></p>
  
  <pre><code>$('#orderPosition').change(
          function () {
              if ($('#orderPosition').val() == 'orderPositionDefault') {
                  $('#orderErrorMessage').show();
                  $('#orderPosition').focus();
                  $('#orderPosition').css("background-color", "lightcoral");
              } else {
                  $('#orderErrorMessage').hide();                    
                  $('#orderPosition').css("background-color", "transparent");
              }
          }
      );
  </code></pre>
  
  <p>I have tried the following</p>
  
  <pre><code>$('#orderPosition').on('click', function () {    
          // var isDirty = !this.options[this.selectedIndex].defaultSelected;
          var changed = $(this).val() != $(this).data('orderPositionDefault');
          alert(changed ? 'changed' : 'not changed');
  
          if (changed) {
              $('#orderErrorMessage').show();
          } else {
              $('#orderErrorMessage').hide(); 
          }
      });
  </code></pre>
  
  <p>But the issue with the above is as soon as i click in the <code>select</code> the error message is displayed, i need it to be displayed of the user clicks in it and closes it straight away without making a selection.</p>