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.

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.

• javascript
• css-selectors
• selectors-api

• 2 FYI, select and textarea elements don't have any type attribute. – Shadow Wizard Commented Dec 19, 2013 at 9:37
• What is the var el? – Kevin Bowersox Commented Dec 19, 2013 at 9:37
• @ShadowWizard You are right, CopyPasta leftovers. @Kevin el = document.body. – A1rPun Commented Dec 19, 2013 at 9:39
• 1 You can just select them all and perform the check for required/disabled/readonly when iterating over the elements. – Shadow Wizard Commented Dec 19, 2013 at 9:47

2 Answers 2

As Shadow Wizard said, at a minimum you can remove the unnecessary :not([type=hidden]) in the various places it has no meaning (select and textarea).

I don't see a problem with the result:

var requiredFields = el.querySelectorAll(
    "input[required]:not(:disabled):not([readonly]):not([type=hidden])" +  
    ",select[required]:not(:disabled):not([readonly])"+
    ",textarea[required]:not(:disabled):not([readonly])");

...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 mon class and then use:

var requiredFields = el.querySelectorAll(
    ".the-class[required]:not(:disabled):not([readonly]):not([type=hidden])");

...but I'm not sure it buys you much.

Please give me a good resource for querySelectorAll function.

There's the specification. MDN is also usually a good place for this stuff.

querySelectorAll

window.l = ['input','textarea','select'];
function myQuerySelectorAll() {
    q = '';
    t = '[required]:not(:disabled):not([readonly]):not([type=hidden])';
    l.forEach(function(e) {
        q += e;
        q += t;
        q += ',';
    });
    console.log(q)
}

$> myQuerySelectorAll();
$> input[required]:not(:disabled):not([readonly]):not([type=hidden]),textarea[required]:not(:disabled):not([readonly]):not([type=hidden]),select[required]:not(:disabled):not([readonly]):not([type=hidden]),