checkValidity / reportVality not working for values set via code

Question

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?

Does this answer your question? [Triggering HTML5 Form Validation](https://stackoverflow.com/questions/7548612/triggering-html5-form-validation) — A. Meshu, Jan 18 '20 at 22:59
@A. Meshu what exactly should answer this specific issue of HTML5 validation not working as expected? — Michele Locati, Jan 20 '20 at 01:08
If you read this thread (https://stackoverflow.com/a/48267035/6525081) you'll see that you need to check the form and not the input itself. I encounter it after i wrote my answer, but i thought that this hold the answer to your question. As both of us can see - i was wrong... — A. Meshu, Jan 20 '20 at 01:14

A. Meshu · Answer 1 · 2020-01-12T14:40:27.617

You should check if the form valid not the input. BUT it seems that the maxLength attribute is not something that trigger validation at all...

If you want to check length of input text you can do that with this:

window.onload = function() {
  var textField = document.getElementById('text-field');
  document.getElementById('set-field-value').onclick = function() { textField.value = 'ab'; };
  document.getElementById('check-valid').onclick = function() {
    if (textField.value && // if exist AND
      textField.value.length > 2 && // if value have 3 charecter at least
      textField.value.trim().length > 2 // if value is not just spaces 
    ) {alert ('input OK');} // alert that input ok
    else { alert('please insert at least 3 charecters');} // else alert error
  };
};

<form id="formCheck">
  <input type="text" id="text-field" min="3" />
  <button type="button" id="set-field-value">Set</button>
  <button type="button" id="check-valid">Is valid?</button>
</form>

The checkValidity() method works as expected on this example (using input number and min attribute) though:

window.onload = function() {
  var theForm =  document.getElementById('formCheck');
  var numberField = document.getElementById('number-field');
  document.getElementById('set-field-value').onclick = function() { numberField.value = '2'; };
  document.getElementById('check-valid').onclick = function() {
    window.alert(theForm.checkValidity());
  };
};

<form id="formCheck">
<input type="number" id="number-field" min="3" />
<button type="button" id="set-field-value">Set</button>
<button type="button" id="check-valid">Is valid?</button>
</form>

score 0 · Answer 2 · answered Jan 11 '20 at 23:29

I investigated this a while. It seems that you're at least missing <form> wrapping the input + button content.

But still, even if I tried to set input field required, still the ValidityObject won't notice that length is exceeded.

As a semi-workaround, I came with an idea of using pattern property:

<input id='textfield' pattern='\S{0,3}'>

(= \S stands for 'all characters except spaces')

This at least will prevent for content beyond three characters. In addition, you can have a setCustomValidity message for invalid cases.

See working example at: https://codepen.io/zvona/pen/rNavqxP?editors=1010

score 0 · Answer 3 · answered Jan 11 '20 at 23:34

I've tried a few things that led me to understand that checkValidity does not check the value itself.

When I click on #check-validity I get :

textField.validity.tooLong // false
textField.validity.valid // true
textField.value // This is a very looooooooooooooooooooooooooooooong text

When I type myself in the input, my browser does not let me type more than 3 characters.

Why?

Precisely I don't know, but there is this awesome article on constraint validation that is worth having a look.

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

textField.value returns your string, you can then access it's length. In this context, I would have anyway prefered this way.

const tooLong = textField.value.length > 3;
if (tooLong) window.alert('Something');

I hope it helps.

checkValidity / reportVality not working for values set via code

3 Answers3