Question

我有一个包含4个输入的表单，我想在提交时显示警告。我所做的是我已经使用display：none创建了每个输入下的警告。在CSS中。

在此之后我在JS中创建了一个for循环以获取每个输入的索引并应用我的if语句来显示警告if === null || ===“” 使用变量来制作querySelector("THE CLASS").style.display="block";

同样在我的表格上我有这一行

<form method="post" class="q-form" name="form" onsubmit="return validate()">

我的问题是，当我提交表单时，显示的唯一警报是用户名下面的警报，在它出现之后它也会消失，因为我认为for循环转到下一个输入。

如果有更多要澄清的内容，请告诉我。

您可以在此处获得所有代码：https://jsbin.com/kazopahuga/1/edit?html,js,output

如果您想看到按下Run with JS

的警告

谢谢！

Answer 1

以下是更新的解决方案：jsbin

你使用的querySelector只返回它找到的同一个类的第一个元素，你应该使用querySelectorAll来返回所有的选择器。

Answer 2

我建议您对validare()功能进行一些修改：

添加一个标志，指示整个表单是否有效，假设它是真的，直到找到无效的输入。返回此标志的值。

var isValid = true;

捕获验证消息，以便您可以像输入一样通过索引访问它们：

messages = document.getElementsByClassName(' alert alert-danger custom');

当您找到无效输入时，显示相关消息并将有效标志更新为false。

if (currentInputValue == null || currentInputValue === "") {
    messages[index].style.display = "block";
    isValid = false;
}

这是更新的功能：

function validare() {

    var inputs, messages, index;
    var isValid = true;

    inputs = document.getElementsByTagName('input');
    messages = document.getElementsByClassName(' alert alert-danger custom');

    for (index = 0; index < inputs.length; ++index) {
        var currentInputValue = inputs[index].value;
        if (currentInputValue == null || currentInputValue === "") {
            messages[index].style.display = "block";
            isValid = false;
        }
    }

    return isValid;
}

Updated jsbin here

JS-＆gt;输入表单验证。使用for循环获取所有输入索引

2 个答案: