checkValidity / reportVality not working for values set via code

The HTML5 checkValidity() / reportValidity() methods don't seem to work if values are set via JavaScript.

Consider this example (JSFiddle):

<input id="text-field" maxlength="3" placeholder="Max len: 3 chars" />
<button id="set-field-value">Set</button>
<button id="check-valid">Is valid?</button>
<script>
window.onload = function() {
    var textField = document.getElementById('text-field');
    document.getElementById('set-field-value').onclick = function() {
        textField.value = 'This is a very looooooooooooooooooooooooooooooong text';
    };
    document.getElementById('check-valid').onclick = function() {
        window.alert(textField.checkValidity());
    };
};
</script>

If you click the Set button, the value of the input field is set to an invalid value (it's length is greater that 3 characters), but the checkValidity() method still says that the input is valid (checked on Chrome, Edge and Firefox).

Why? Is there a way to determine is the field is valid even if its value is set via code?