title: HTML5 <input> type = number prevent user from violating the min="" or max="" value
body: <p>First of all you can just enter a different number by hand and then you can just go over or under the specific values. Also you could inspect the element and set a different min or max yourself. How would I validate this? Or should I just set a check on the SQL for the values to either be 0 or 1.</p>
  
  <p>This is my code right now:</p>
  
  <pre><code>&lt;form action="" method="post" class="-koowa-form"&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;input  type="text" name="naam" id="naam" size="40" maxlength="255" value="&lt;?= $test-&gt;naam; ?&gt;" placeholder="&lt;?= translate( 'naam' ); ?&gt;" /&gt;
              &lt;input  type="text" name="kleur" id="kleur" size="40" maxlength="255" value="&lt;?= $test-&gt;kleur; ?&gt;" placeholder="&lt;?= translate( 'kleur' ); ?&gt;" /&gt;
              &lt;input  type="number" name="active" id="active" size="40" min="0" max="1" value="&lt;?= $test-&gt;active; ?&gt;" placeholder="&lt;?= translate( 'active' ); ?&gt;" /&gt;
          &lt;/div&gt;
          &lt;input type="color" name="kleurcode" value="&lt;?= $test-&gt;kleurcode; ?&gt;"  
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>What I have right now just seems to be incredibly messy and I see threads from over 3 years ago about this issue. Wondering if there's a easy and clean fix for this or I should just do it differently. </p>
  
  <p>EDIT: To clarify I'm aware it will obviously have to be checked in the back-end, but I want to make it work properly in the front-end too. This just seems incredibly sloppy and unprofessional.</p>
  
  <p>FIX: For now I've done this, adding a validation error message with jquery sometime later</p>
  
  <p>EDIT: Fix was horrible added a reuseable javascript only fix now</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function checkMinMax(event) {
      var value = this.value,
          min = this.getAttribute('min'),
          max = this.getAttribute('max');
  
      if(value &lt; min)
          this.value = min;
      else if(value &gt; max)
          this.value = max;
  }
  
  window.addEventListener('load', function() {
      document.getElementById('active').addEventListener('keyup', checkMinMax);
  });
  </code></pre>
  
  <p></p>