html5 oninvalid doesn't work after fixed the input field
If you set a value with setCustomValidity()
then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to take effects of your new input you have to clear the custom validity.
Simply you can use the following:
<input required maxlength="255" id="information_name" minlength=1 name="information[name]" oninvalid="setCustomValidity('Should not be left empty.')"
oninput="setCustomValidity('')" />
There is no need to use Javascript for this.
You can set a custom validity message with setCustomValidity
, however any non-blank string will cause the field to act as if it had an invalid value. You need to setCustomValidity('')
to clear the invalidated state of the field.
If your validity is simple and controlled via field attributes, you can use object.willValidate
to do the test and set the custom validity message:
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')"
If you setCustomValidity
to any value that is not the empty string then that will cause the input
to be in the invalid
state. So your condition is checking for a value, then setting the field to be invalid
either way. Only setCustomValidity
when the value in the field is actually invalid, otherwise set it to an empty string:
<script>
function check(input) {
if (input.value == "") {
input.setCustomValidity('Debe completar este campo.');
} else {
input.setCustomValidity('');
}
}
</script>