title: jQuery validate. only required with specific option
body: <p>I would like to validate if there is any text in the custom field but only if the custom option is selected above. I'm very new to HTML (alright with C) so please excuse the rest of my mistakes (probably many) but please point them out with an explanation :)
  I have tried following the other questions people have posted here with very similar situations but not making any progress.
  Thank you!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;html lang="en"&gt;
          &lt;main&gt;
          &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
       
    &lt;h1&gt;D D D S &lt;/h1&gt;
    
    &lt;link rel="stylesheet"href="request.css"&gt;
    &lt;script src="jquery.js"&gt;&lt;/script&gt;
    &lt;script src="jquery.validate.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    jQuery(function ($) {
    $('#myInput').validate({
     debug: true,
     rules: {
          customdrinkfield: {
              required: function (el) {
                  return $(el).closest('form').find('.drinkChoice').val() == 'custom'; } }
     }
    });
          });   &lt;/script&gt;
    &lt;script type="text/javascript"&gt;
     function checkvalue(val) {
       var element=document.getElementById('çustomdrinkfield');
      if(val=="custom")
          document.getElementById('customdrinkfield').style.display='block';
      else
       document.getElementById('customdrinkfield').style.display='none';
      }    
    &lt;/script&gt;  
    &lt;/head&gt;
  
           &lt;body&gt;
    
        &lt;div class="field"&gt;
    
    &lt;!--name field //--&gt;
    &lt;form class="form-request" action="" method="POST" id="myInput&gt;
    &lt;label for="inputName" class="sr-only"&gt;&lt;/label&gt;
    &lt;input for="name" name="inputName" value="" id="inputName" class="form-control" placeholder="Name" maxlength="16" required autofocus&gt;
   
       &lt;!--location field //--&gt;
    &lt;br&gt;
    &lt;select name="location" onchange='checkvalue(this.value)' required&gt;
     &lt;option value="" disabled selected hidden&gt;Delivery Location&lt;/option&gt;
     &lt;option value="deck"&gt;Deck&lt;/option&gt;
     &lt;option value="grass"&gt;Grass&lt;/option&gt;
     &lt;option value="poolShallow"&gt;Pool shallow&lt;/option&gt;
     &lt;option value="poolDeep"&gt;Pool Deep&lt;/option&gt;
    &lt;/select&gt;
    
    &lt;!--drink field //--&gt;
    &lt;br&gt;
    &lt;select name="drink" id="drinkChoice" onchange='checkvalue(this.value);' required&gt; 
     &lt;option value="" disabled selected hidden&gt;Drink Choice&lt;/option&gt;
     &lt;option value="Slushie A"&gt;Slushie A&lt;/option&gt;
     &lt;option value="Sluishie B"&gt;Slushie B&lt;/option&gt;
     &lt;option value="water"&gt;Water&lt;/option&gt;
     &lt;option value="custom"&gt;Custom&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;!--custom field //--&gt;
    &lt;input type="text" name="customdrinkfield" id="customdrinkfield" style='display:none;' placeholder="Custom"/&gt;
    
    &lt;/br&gt;
    &lt;!--submit //--&gt;
    &lt;button id="btnRequest" type="submit" formvalidate value="Submit"&gt;Request&lt;/button&gt;
    &lt;/form&gt;
       &lt;/div&gt;
         &lt;/body&gt;
         &lt;/main&gt;
         &lt;/html&gt;  </code></pre>
  </div>
  </div>
  </p>