Question

我有一个多页表单，其中包含一些必需属性的输入。如果带有required属性的输入为空，我想隐藏或显示按钮。我怎么能用javascript做到这一点？

Answer 1

验证失败的元素将匹配:invalid伪选择器。你可以匹配它来隐藏下一个元素：

＆＃13;

input:invalid {
  border-color: red;
}

input:invalid + span {
  display: none;
}

＆＃13;

<input required>
<span>
  <button>Submit</button>
</span>

＆＃13;

如果您有多个元素并且想要根据是否有任何内容显示或隐藏某些内容，您应该知道包含<form>元素的:invalid也是:invalid：

＆＃13;

input:invalid {
  border-color: red;
}

input:valid + span {
  display: none;
}

form:invalid + div {
  display: none;
}

＆＃13;

<form>
  <input required>
  <span>First name required!</span>
  <br>

  <input required>
  <span>Last name required!</span>
  <br>
</form>
<div>
  <button>Submit</button>
</div>

＆＃13;

Answer 2

您可能应该重命名您的问题，因为它与＆＃34;所需的消息显示＆＃34;无关。在你的情况下，你可以尝试这样的事情：

var handlerFunction = function () {
    var elements = document.querySelectorAll("#myForm input");
    var isEmpty = false;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].value === '') {
            hideButtons();
            isEmpty = true;
            break;
        }
    }
    if (!isEmpty) {
        showButtons();
    }
};

var hideButtons = function () {
    // hide buttons
};

var showButtons = function () {
    // show buttons
};

var elements = document.querySelectorAll("#myForm input");
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("keydown", handlerFunction);
}

要使用它，您必须将#myForm更改为您表单的ID或类。这是您想要的javascript解决方案，但上面使用css的解决方案要好得多（如果您不需要使用javascript）。

Answer 3

我会得到输入并查看内容是否等于空：

document.getElementById('inputRequire').innerText == '';
document.getElementById('inputRequire').value == '';

然后我展示另一个：

   var hiddenElements = document.getElementsByTagName('hiddenOnes');
foreach(...){
 element.style.display = 'block';
}

类似的东西，我不测试代码，但我认为它可以帮助你

HTML5表单必需属性。如何检查所需的消息已显示？

3 个答案: