javascriptvalidationpolymerpolymer-2.xpolymer-3.x

query the all elements(queryselectorall) in a page in polymer 3 not working due to shadow element

Previously i used polymer 1, for some custom validation i have used following code with queryselectorAll to get the all invalid elements

            var _formTag = this.$$("request-details").$$("#newForm");
           _array = Array.prototype.slice.call(_formTag.querySelectorAll(":invalid"),0);

now, i am doing upgrade to polymer 3 and it is not working with queryselectorAll since all invalid inputs wrapped now with shadowroot. Handling elements one by one using id and traversing through shadow root will be tough since we have more number of on-demand form elements. Sugget me any idea to get the all invalid elements in page.

Solution

  • You can get all elements in that form which needs to be validated and then filter which are invalid as below

    var elements = this.$.newForm._getValidatableElements();
var invalidElements = elements.filter(x => x.invalid);