Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <form action="">
    <label for="age"> Age </label>
    <input type="number" name="age" required min="1" max="150"/>
    <br/>
    <input type="submit"/>
  </form>
</body>
</html>
 
document.addEventListener("DOMContentLoaded", function(){
  var invalid = function(e){
    if(e.target.validity.badInput){
      e.target.setCustomValidity('Only Integer');
      return;
    }
    if(e.target.validity.rangeOverflow){
      e.target.setCustomValidity('max value 150');
      return;
    }
    if(e.target.validity.rangeUnderflow){
      e.target.setCustomValidity('min value 1');
      return;
    }
    if(e.target.validity.valueMissing){
      e.target.setCustomValidity("Value Missing");
      return;
    }
  };
  var age_element = document.getElementsByName("age");
  age_element[0].oninvalid = invalid;
  age_element[0].oninput = function(e) {
    e.target.setCustomValidity("");
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x