如何在不使用表单的情况下将输入字段设置为无效，以便根据条件使底部轮廓显示为红色

<div id="inputContainer">
  <input type="text" id="inputField">
</div>

#inputContainer {
  border-bottom: 2px solid black; /* 默认底部轮廓颜色为黑色 */
}

.invalid {
  border-bottom-color: red; /* 无效时底部轮廓颜色为红色 */
}

var inputField = document.getElementById("inputField");
var inputContainer = document.getElementById("inputContainer");

inputField.addEventListener("input", function() {
  if (/* 根据条件判断输入字段的有效性 */) {
    inputContainer.classList.add("invalid");
  } else {
    inputContainer.classList.remove("invalid");
  }
});