title: jQuery validate max value on Form Submit
body: <p>I want to validate a form, when it gets submitted. I need to check the following things:</p>
  
  <ol>
  <li>Whether the user has selected any option from the dropdown.</li>
  <li>Whether the user has entered a value larger than the max-value </li>
  </ol>
  
  <p>If any of this conditions is not matched, I want to show an error message in a modal window...</p>
  
  <p>How can I achieve this behaviour? Below is a code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//This function sets max value, based on selected option's data-max
  $('select').change(function(e) {
    var selectedIndex = $('select').prop("selectedIndex");
    var selectedOption = $('select').find("option")[selectedIndex];
    $('input[type=number]').attr('max', $(selectedOption).data('max'));
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form method="post" action="./cart_update.php"&gt;
    Select Size:
    &lt;select size="1" name="options" class="selectsize"&gt;
      &lt;option value=""&gt;-- Select --&lt;/option&gt;
      &lt;option value="30" data-max="50"&gt;30&lt;/option&gt;
      &lt;option value="31" data-max="50"&gt;31&lt;/option&gt;
      &lt;option value="32" data-max="40"&gt;32&lt;/option&gt;
      &lt;option value="33" data-max="50"&gt;33&lt;/option&gt;
      &lt;option value="34" data-max="50"&gt;34&lt;/option&gt;
    &lt;/select&gt;
    Quantity
    &lt;input type="number" class="cart_qty" name="product_qty" size="1" value="1" min="1" max="100" /&gt;
    &lt;button class="orange medium full add-to-cart" type="submit"&gt;Add To Cart&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>