input[type=text]のvalidate

HTML

<lab
el>input <input type="text" pattern="[^\u0000-\u007F]*" oninput="handleInput(event);"></label>
<label>blur <input type="text" pattern="[^\u0000-\u007F]*" onblur="handleBlur(event);"></label>
<label>focusout <input id="sample" type="text" pattern="[^\u0000-\u007F]*"></label>

<ul>
 <li><a href="https://teratail.com/questions/31090">Formのないテキストボックスの入力値チェックを行いたい(31090)｜teratail</a></li>
</ul>

JavaScript

'use strict';
function handleInput (event) {
  event.target.reportValidity();
}

function handleBlur (event) {
  var input = event.target;

  setTimeout(input.reportValidity.bind(input), 0)
}

document.addEventListener('focusout', function handleFocusout (event) {
  var input = event.target;

  if (input.id === 'sample') {
    input.reportValidity();
  }
}, false);