HTML5 Hacks 2.7

new input.css

input[type=number]{border: 2px solid green}
input:invalid {border: 2px solid red}

new input.html

<form name="myForm">
  Pick a number, any number between 1 and 5: <input type="number" name="quantity" min="1" max="5" /> <br />
  <input type="submit" name="mySubmit" />
</form>

new input.js

document.myForm.quantity.addEventListener('input', function(e){this.checkValidity()}, false);

document.myForm.quantity.addEventListener('invalid', function(e){
alert('Your Number needs to be between 1 and five, you choose '+this.value+'.')
}, false);