Form validation triggers after required prop is set to false

Question

After setting the required prop to false using $( '#field' ).prop( 'required', false );, form.checkValidity() still returns false on the field and form.reportValidity() tries to focus on the element.

An invalid form control with name='' is not focusable.

The element of input type date does not have a name and is hidden, while other elements of type select do not seem to have this issue.

Full error message (name attribute added):

An invalid form control with name='' is not focusable.
<input id="ipt-arrival-date" name="arrival" type="date" onfocus="this.showPicker()" min="2024-09-04" max="2024-09-08" class="">

From the error it shows that the required prop is not there at the time the error shows.

The form is too large to post the complete code.

Any ideas?

Answer 1

Happy that I found out what was happening, though it was quite frustrating at first!

So I "unhided" the parent container in de dev console and the actual error popped up, which was not about it being required or not, but about the maximum date set for the element and the value not being valid for that restriction.