仅适用于每个必填字段

问题描述

我已经能够在所有选择字段上成功执行forEach，但我无法仅评估必需的选择。如何调整我的js，使其仅适用于必填字段？

<form>
<div>
<select required="true">
 <option value>- Select -</option>
 <option value>- option 1 -</option>
 <option value>- option 2 -</option>
</select>
</div>
<div>
<select required="true">
 <option value>- Select -</option>
 <option value>- sample 1 -</option>
 <option value>- sample 2 -</option>
</select>

</div>
<div><select>
 <option value>- Select -</option>
 <option value>- optional 1 -</option>
 <option value>- optional 2 -</option>
</select>
</div>
</form>

<script>
let check_inputs = js_form.querySelectorAll("select :checked");

[].forEach.call(sel_inputs,function (elm) {
    if (!elm.value) {
      not_pass = true;
      elm.closest(".usa-form-group").classList.add(error_container_class);
    } else {
      elm.closest(".usa-form-group").classList.remove(error_container_class);
    }
  });
</script>

但是我的尝试总是正确的。如何将类仅应用于此forEach中的必填字段？

[].forEach.call(sel_inputs,function (elm) {
    if (!elm.value && !elm.hasAttribute("required")) {
      not_pass = true;
      elm.closest(".usa-form-group").classList.add(error_container_class);
    } else {
      elm.closest(".usa-form-group").classList.remove(error_container_class);
    }
  });

解决方法

使用document.querySelectorAll("select[required=true]")作为元素选择器仅返回select属性设置为required的{​​{1}}个元素。它使用CSS选择器，有关更多信息，请参见W3Schools。

true