Readonly vs invalid

JavaScript
#1

Someone can explain a bit why the readonly called with [inside] and like invalid with :inside ?

if ( $('#mrp1').is('[readonly]') ) { // logic goes here }

if ( $('#mrp1').is(':invalid') ) { // logic goes here }

So what does the [] what : not? Any difference? And why?

Thanks!

#2

You select HTML attributes with square brackets, so your element would look like:

// HTML:
<input id="mrp1" readonly>
// JS:
const input = $('#mrp1');
console.log(input.readOnly); // true

You select element state with :, like hover, focus or in your case invalid. It’s not an attribute

2 Likes
#3