I have some dynamically ajax generated form:
<form id="formThatWillBeReplcaedViaAjax">
<div class="col-main">
<div class="row">
<div class="input-group">
<input id="some_unique_generated_id_27362" aria-invalid="false" ... >
</div>
</div>
<div class="row">
<div class="input-group">
<input id="some_unique_generated_id_27363" aria-invalid="false" ... >
</div>
</div>
<div class="row">
<div class="input-group">
<input id="some_unique_generated_id_27364" aria-invalid="false" ... >
</div>
</div>
</div>
</form>
I have some animation function (loader() ) and the function that replaces the current form with the next form ( requestNextForm() )
I want to check by looping through form with pure JS or JQuery to check if all attributes aria-invalid are equal to "false".
If they are, then let the loader() load the animation and only then request the next form via requestNextForm().
How can I do it with JQuery or JS or maybe Lodash ?
Thank you in advance!
querySelectorAll 'input[aria-invalid]:not([aria-invalid="false"])' which translates to: return all input elements that have an attribute aria-invalid whose value is not "false"Here's what the code could look like:
var ariaInvalidNotFalse = document.querySelectorAll('input[aria-invalid]:not([aria-invalid="false"])');
if(ariaInvalidNotFalse.length > 0){
// Some elements have aria-invalid
// but with a value that is not false
} else {
// All inputs with aria-invalid
// have it set to "false"
// Call loader() etc...
}