Check input using HTML5 and MDL

You can use input's attributes as min, max, pattern and so on, and then checking a simple class do what you need to

by Génesis García Morilla

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
  <main class="mdl-layout__content">
    <div class="mdl-grid">
      <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="number" min="0" max="12" id="number">
        <label class="mdl-textfield__label" for="number">Number between 0 and 12...</label>
        <span class="mdl-textfield__error">Input is not a number between 0 and 12!</span>
      </div>
      <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">ok</button>
    </div>
  </main>
</div>

CSS

.hide {
  display: none;
}

JavaScript

var $input = document.querySelector("input");
var $button = document.querySelector("button");

function check() {
  if (document.querySelector(".is-invalid")) $button.classList.add("hide");
  else $button.classList.remove("hide");
}

$input.addEventListener("input", check);