title: How to change the default required select option field message using jquery
body: <p>How can I change the default Message of a required select option field. Its a variation of WooCommerce's product. I added the property dynamically and try to change the message my bellow code able to change the message but it not works . It always appearing no matter if there is a selected value or not.</p>
  
  <p><a href="http://jsfiddle.net/rupomkhondaker/tbnry7qd/" rel="nofollow noreferrer"><strong>JsFiddle</strong></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id="color" class="" name="attribute_color" data-attribute_name="attribute_color"&gt;
       &lt;option value="" selected="selected"&gt;Choose an option&lt;/option&gt;
       &lt;option value="White" class="attached enabled"&gt;White&lt;/option&gt;
       &lt;option value="Black" class="attached enabled"&gt;Black&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>jQuery(document).ready(function($) {
  
   $('select#color').prop('required', true);
    if( !$('select#color').has('value').length &gt; 0 ) {
      $('select#color').attr("oninvalid", "this.setCustomValidity('Please select a color')");
    }else{
       $('select#color').removeAttr("oninvalid", "this.setCustomValidity('Please select a color')");
    }
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rupomkhondaker/tbnry7qd/" rel="nofollow noreferrer"><strong>JsFiddle</strong></a></p>
  
  <p><a href="https://i.stack.imgur.com/bQWpK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bQWpK.png" alt="Required error message"></a></p>