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

Question

我有一个多页面表单，带有一些必需的属性。如果输入必填属性为空，我想隐藏或显示按钮。 我该如何用javascript做到这一点？

Answer 1

未通过验证的元素将匹配:invalid假选择器。可以匹配的是隐藏下一个元素：

input:invalid { 
 
    border-color: red; 
 
} 
 

 
input:invalid + span { 
 
    display: none; 
 
}

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

如果你有多个元素，你要显示或隐藏基于什么是不好的东西，你应该知道，<form>含有:invalid元件也:invalid：

input:invalid { 
 
    border-color: red; 
 
} 
 

 
input:valid + span { 
 
    display: none; 
 
} 
 

 
form:invalid + div { 
 
    display: none; 
 
}

<form> 
 
    <input required> 
 
    <span>First name required!</span> 
 
    <br> 
 

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

Answer 2

我会得到的输入，看看含量等于空：

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

，然后我会让对方：

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

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

Answer 3

您应该重新命名您的问题，因为它与“所需的信息显示”无关。你的情况，你可以尝试这样的事：

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）。