JavaScript - 仅当满足特定条件时，您能否将 class 添加到输入元素？

Question

我在使用 JavaScript 时遇到问题，因此当用户尝试提交我的 HTML/CSS 表单而任一输入字段为空白时，相关字段将显示为“突出显示”或概述。 我的目标是根据字段的值是否为空白，将 class（某种透明层）添加到其中一个输入字段。 到目前为止，我已经尝试过使用： element.classList.add("className"); 没有运气。 输入字段没有定义类，所以我只想添加。

任何帮助表示赞赏。

Answer 1

我会遍历我的输入并检查它们的值是否为真，然后相应地更改 class 名称。 如果输入为空，则输入的值返回 false。

const form = document.querySelector("form");
const inputs = document.querySelectorAll("input");


form.addEventListener("submit", (event) => {
    event.preventDefault();
    checkInputs();
});


const checkInputs = () => {
    inputs.forEach(input => {
        if (input.value) {
            input.className = "your-class-name-1"
        } else {
            input.className = "your-class-name-2"
        }
    })

};

Answer 2

正如上面每个人所说，您应该使用所需的参数，但如果您想使用您的解决方案，您应该告诉我们什么不起作用。

我检查了您的代码并为此创建了一个小表单，例如：

<form id='form'>
<input type="text"/ id='form-field1' placeholder='1'>
<input type="text"/ id='form-field2' placeholder='2'>
<button type='submit'/>
</form>

你的代码：

const form = document.getElementById('form');
const a = document.getElementById('form-field1');
const b = document.getElementById('form-field2');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();
});

function checkInputs() {
    const aValue = a.value.trim();
    const bValue = b.value.trim();
    
    console.log(aValue);
    console.log(bValue);
    
    if (aValue === "") {
        a.classList.add("red-transparent-overlay");
    } else {
        a.classList.add("green-transparent-overlay");
    }
}

并在第一个字段为 null 时提交我的表单，将 red-transparent-overlay class 添加到第一个字段，第二个语句也是如此，因此您的代码正在运行。

Answer 3

添加 class 时，请确保删除其他 class。

    if (aValue === "") {
        a.classList.add("red-transparent-overlay");
        a.classList.remove("green-transparent-overlay");
    } else {
        a.classList.add("green-transparent-overlay");
        a.classList.remove("red-transparent-overlay");
    }