Jean Jean - 1 year ago 139
HTML Question

html5 oninvalid doesn't work after fixed the input field

I have this input code in my form:

<input maxlength="255" id="information_name" name="information[name]" oninvalid="check(this)" placeholder="Nombre Completo" required="required" size="30" style="width:528px;height:25px;" tabindex="3" type="text">

I change the oninvalid message with this javascritp code:

function check(input) {
if (input.value == "") {
input.setCustomValidity('Debe completar este campo.');
} else {
input.setCustomValidity('Debe corregir este campo.');


Here is the problem, if I clicked on submit and the field is empty, the field shome the error so I need to fill the field, but after fill the field, I still getting the warning even the fill is not empty.

What I'm doing wrong???

Answer Source

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')"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download