HTML5 Validation API not working in Firefox?

Question

The validity property of an HTML input in HTML5 does not seem to work in Firefox.

var input = $input.get(0);
console.log(input.validity)

This console log returns an empty object. It's working on Chrome and Safari and I think it's also suppose to work on Firefox if I look at that doc?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Any ideas?

Answer 1

If it's appearing as an empty object, it's likely because only enumerable properties are being rendered, which ValidityState's properties don't seem to be in Firefox.

But, you should still be able to access individual properties:

console.log(input.validity.valid);   // true/false
console.log(input.validity.tooLong); // true/false
// etc.

Answer 2

input.validity returns a special object, not just a simple boolean.

So, use input.validity.valid to check if an inputted value is correct.

See this JSFiddle to see validity properties.

And this MDN Article about the ValidityState object.

And as far as debugging in Firefox, Firebug shows this kind of stuff.