We Keep Coding

document.querySelectorAll to retrieve all the required elements [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I want to use document.querySelectorAll to get all the elements having "required" attribute in them. For example:
<input autocomplete="off" name="des" required="">
Please find the code below to retrieve these elements:
const requiredFields = document.querySelectorAll('[required]');
console.log('all required fields', requiredFields);
I have tried the code mentioned above, but it returns nothing.
all required fields NodeList []
As per the requirement, required fields should be displayed on page load. All other elements should be hidden. How do I achieve this ? Also, how to get/hide all the elements not having the "required" attribute ?
Thanks

20/01/21
Edit:
you mistake was cominng from require="" check my code below.
as mentioned in the comments require is a boolean attr therefore it doesn't get any value (is rather required or not)
HTML:
<input autocomplete="off" name="des" required value="1">
<input autocomplete="off" name="des" value="2" >
<input autocomplete="off" name="des" required value="3">
<input autocomplete="off" name="des" value="4" >
<input autocomplete="off" name="des" required value="5">
<input autocomplete="off" name="des" required value="6">
<input autocomplete="off" name="des" required value="7">
JS:
const inputs = document.querySelectorAll("[required]")
console.log(inputs)
codepen:
https://codepen.io/Elnatan/pen/XWdJrez

How do I set input field size so that after entering 4 words in input it jumps to the next field?

This is my code. I'm using stripe code fields
Card number
<label>
<span style="width:151px;">Card Number</span>
<input type="text" size="20" class="field" data-stripe="number" placeholder="4242-4242-4242-4242"/>
</label>
CVC number size 3
<label>
<span style="width:151px;"> CVC</span>
<input type="text" size="3" class="field" data-stripe="cvc" placeholder="CVC"/>
</label>
Month size 2 and year 4
<label>
<span style="width:151px;">Expiration(MM/YYYY)</span>
<input type="text" size="2" class="field" data-stripe="exp-month" placeholder="MM"/>
<input type="text" size="4" class="field" data-stripe="exp-year" placeholder="YY"/>
</label>

Not an exact answer to your question, but if possible, I'd recommend that you switch to using Elements (Stripe.js v3) instead of Stripe.js v2.
Not only will it take care of formatting the card number automatically, it will also make you eligible for PCI SAQ A, while with Stripe.js v2, you'd fall under the more cumbersome PCI SAQ A-EP. (More information about this here.)

Shortcut for declaring value on many inputs using javascript?

Help - my program has too many inputs, is there a way to make a script to make it shorter for shorter time?
PS: I reduced my code to only 5 inputs and value is only my problem (already did the type, name and id)
<input type="checkbox" name="input1" id="input1" value="<%=array[0].input1%>">
<input type="checkbox" name="input2" id="input2" value="<%=array[0].input2%>">
<input type="checkbox" name="input3" id="input3" value="<%=array[0].input3%>">
<input type="text" name="input4" id="input4" value="<%=array[0].input4%>">
<input type="text" name="input5" id="input5" value="<%=array[0].input5%>">
I always paste <%=array[0].input%> and edit it depending to its name. Thanks.

How to add attribute to HTML element using javascript

Using javascript (preferably not jquery) I'm trying to change the line:
<input type="number" name="price" required="" id="id_price">
into
<input type="number" name="price" required="" id="id_price" step="any">
I know the solution's got to be easy but I just can't crack it. Help would be much appreciated!!

As torazaburo suggests in the comment you can do it in one step with setAttribute() method
document.getElementById("id_price").setAttribute("step","any");
<input type="number" name="price" required="" id="id_price">
OR
First create the attribute and set the value. Then add it to the element..
var attr = document.createAttribute('step');
attr.value="any";
document.getElementById("id_price").setAttributeNode(attr);
<input type="number" name="price" required="" id="id_price">

JQuery validate plugin - can't validate classes

I'm trying to use the jQuery validate plugin to validate classes instead of ID's. Despite the many threads which seem close to answering this issue - I can't get any of them to work. I simply have a form that has a lot of dynamically generated repeating form fields, so naturally I can't add rules for the ID's because there's no knowing how many of them there will be. So, instead, I would like to just target the class on the input field.
<input type="text" id="name1" class="fileName" />
<input type="text" id="name2" class="fileName" />
<input type="text" id="name3" class="fileName" />
<input type="text" id="name4" class="fileName" />
How do I target 'fileName' class? I've tried this:
$(document).ready(function(){
$.validator.addClassRules({
fileName:{
required: true
}
});
$("#myForm").validate();
});
But this does not work at all :(
Any ideas? Anyone?

You need to specify a name attribute on each input element for validator to pick it up:
<form action="#">
<input type="text" id="name1" class="fileName" name="name1" />
<input type="text" id="name2" class="fileName" name="name2"/>
<input type="text" id="name3" class="fileName" name="name3"/>
<input type="text" id="name4" class="fileName" name="name4"/>
</form>
Here's a working example: http://jsfiddle.net/Nbcj9/

According to the docs, this should work:
jQuery.validator.addClassRules('classNameHere', {
required: true
});
Then you can determine whether the fields are valid by calling:
$('.fileName').valid();
Here's a link to the docs

what about:
$(".fileName").validate();