JS Find :invalid Inside Div - Javascript

在编写表单验证脚本时，我们经常需要在表单中查找无效的字段，并标记这些字段。在 JavaScript 中，我们可以使用 :invalid 伪类来查找无效的字段。但是，在某些情况下，我们需要在特定的 div 中查找无效的字段。在这种情况下，我们可以使用以下代码：

const div = document.getElementById('myDiv');
const invalidFields = div.querySelectorAll(':invalid');

在上面的代码中，我们首先找到带有 myDiv ID 的 div，然后使用 querySelectorAll 方法和 :invalid 伪类来查找所有无效的字段。最终，我们将返回一个 NodeList，其中包含所有无效的字段。

回到我们所说的表单验证脚本，我们可以使用上述代码来查找特定的 div 中的所有无效字段并标记它们：

const div = document.getElementById('myDiv');
const invalidFields = div.querySelectorAll(':invalid');

for (const field of invalidFields) {
  field.classList.add('invalid');
}

在上面的代码中，我们遍历所有无效的字段并将 invalid 类添加到它们身上。然后，我们可以使用 CSS 来标记这些字段：

input.invalid {
  border: 2px solid red;
}

在上面的 CSS 中，我们使用 .invalid 类来将红色边框添加到带有 invalid 类的输入字段上。

总结：在 JavaScript 中使用 querySelectorAll 和 :invalid 伪类查找特定的 div 中的无效字段，并使用 CSS 标记它们。

参考文献

• MDN Web Docs：:invalid

• MDN Web Docs：Document.querySelectorAll()