I have been utilizing the ValidityState interface for client-side form validation, but I've encountered an issue. Whenever my form is populated programmatically, such as after making a call to a third-party API, the tooLong state always returns false, even when the field length exceeds the limit.
To demonstrate this problem, I have created a simple mocked code example:
document.querySelector('form').setAttribute('novalidate', true);
const input = document.getElementById("test");
input.value = "inputstringtoolonga";
console.log(input.validity);.field {
max-width: 410px;
margin-bottom: 15px;
}<div class="d-flex">
<form class="validate" autocomplete="off">
<div class="field">
<input placeholder="Test" type="text" maxlength="6" class="form-control" id="test" pattern="^[0-9]+$" required>
</div>
<button type="submit" class="btn btn-primary" disabled>Submit</button>
</form>
</div>While the patternMismatch state functions correctly when the pattern is not matched, the tooLong state remains false regardless of actually exceeding the maxlength attribute set for the input field. This discrepancy is evident in the provided example.
It is clear from the demonstration that the input value surpasses the specified maxlength attribute. However, the tooLong state does not reflect this violation. What could be causing this inconsistency?