Input type number validation tests

by sehsarah

HTML

<form>
  <input id="test-input" type="text" title="E.g. 20% or 2.50" pattern="([0-9]{1,}(?![.]{1})|[0-9]{1,}[.]{1}[0-9]{1,})[%]{0,1}" placeholder="E.g. 20% or 2.50"/>
  
  <span id="message" class="invalid"></span>
  
</form>

CSS

::-webkit-validation-bubble {
  display: none;
}

input:valid {
  border: 1px solid blue;
}

input:invalid {
  border: 1px solid red;
}

input {
  outline: none;
}

.invalid {
  color: red;
}

JavaScript

(function () {
  'use strict';
  
  var input = document.getElementById('test-input'),
      message = document.getElementById('message');

  window.onsubmit = function () {
    alert('successful submit of value ' + input.value);
    input.value = '';
    return false;
  };
  
  input.addEventListener('input', function (e) {
    if (input.validity.valid) {
      message.innerHTML = '';
    } else {
      message.innerHTML = 'Please use the required format. ' + this.title;
    }
    
    // NOTE TO SELF: if the message isn't dynamic this part can
    // totally be done just using CSS, which would be ideal
    // See http://www.alistapart.com/articles/forward-thinking-form-validation/
  });
  
}());