仅 forEach 必填字段

Question

我已经能够在所有选择字段上成功执行 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);

    }

  });

Answer 1

document.querySelectorAll("select[required=true]")用作元素选择器仅返回属性设置为的select元素。这使用 CSS 选择器，有关的更多信息可以在W3Schools上找到。requiredtrue

document.querySelectorAll("select[requred=true]").forEach(function(elem){
    // Function code here...
    });