I have this piece of code:
var requiredFields = el.querySelectorAll("input[required]:not(:disabled):not([readonly]):not([type=hidden])");
If I want to add the textarea
and select
to the query I'm ending up with this:
var requiredFields = el.querySelectorAll("input[required]:not(:disabled):not([readonly]):not([type=hidden])"+
",select[required]:not(:disabled):not([readonly]):not([type=hidden])"+
",textarea[required]:not(:disabled):not([readonly]):not([type=hidden])");
My feeling says this could be better.. but how?
Bonus: Please give me a good resource for querySelectorAll function.
As Shadow Wizard said, at a minimum you can remove the unnecessary
:not([type=hidden])
in the various places it has no meaning (select
andtextarea
).I don't see a problem with the result:
...not least because it hands the whole thing off to the selector engine to take advantage of any optimization it can do.
Alternately you could give all of the relevant inputs a common class and then use:
...but I'm not sure it buys you much.
There's the specification. MDN is also usually a good place for this stuff.