javascript - 如何在为空或不为空时通过更改输入颜色来验证表单？

Question

当前情况：我在提交表单时设置了基本事件侦听器。

事件侦听器功能：查找空字段并将输入字段标记为红色并放置一个占位符说Required。

// Look for errors i.e. empty fields
document.getElementById("form").addEventListener("submit", (e) => {

    for(var i = 0; i < document.querySelectorAll('#form input').length; i++) {
        // Check empty
        if(document.querySelectorAll('#form input')[i].value === "") {
            e.preventDefault();

            document.querySelectorAll('#form input')[i].style.backgroundColor = 'red';
            document.querySelectorAll('#form input')[i].placeholder = "Required";
            
        } else {
            document.querySelectorAll('#form input')[i].style.backgroundColor = '#fff';
        }
    }
});

<form id="form">

<input>

<input>

<input>

<button>Submit</button>

</form>

目标：如果当前输入为红色，并且用户填写了一些数据 - 我希望它在 user 期间将输入更改回白色input。但不是在 user 期间一次验证所有输入input，只是用户的特定input目标。

问题：

我怎样才能有当前的表单验证submit- 然后验证selected input？

标签： javascript

Answer 1

我在输入元素上添加了新的事件侦听器，因此当您输入红色输入时，它们会变回白色。

// Look for errors i.e. empty fields
    document.getElementById("form").addEventListener("submit", (e) => {

        for(var i = 0; i < document.querySelectorAll('#form input').length; i++) {
            // Check empty
            if(document.querySelectorAll('#form input')[i].value === "") {
                e.preventDefault();

                document.querySelectorAll('#form input')[i].style.backgroundColor = 'red';
                document.querySelectorAll('#form input')[i].placeholder = "Required";
                
            } else {
                document.querySelectorAll('#form input')[i].style.backgroundColor = '#fff';
            }
        }
    });

document.querySelectorAll('#form input').forEach(item => {
  item.addEventListener("input", (e) => {
    item.style.backgroundColor = 'white';
  })
});

<form id="form">
    <input>
    <input>
    <input>
    <button>Submit</button>
</form>