![](/img/trans.png)
[英]How to select two input fields at once and check if they are filled?
[英]How to use queryselector to verify if TWO input fields are filled?
我的功能如下:
<script type="text/javascript">
function displayquestion(a, ignore) {
var b = a - 1;
var currentInput = '';
var questions = document.getElementsByClassName("questionholder");
var showRequired = document.getElementById("requiredMessage");
function showNext() {
showRequired.style.display = "none";
for (var i = 0; i < questions.length; i++) {
questions[i].style.display = "none";
}
var nextQuestion = document.getElementById("question" + a);
if (nextQuestion !== null) {
nextQuestion.style.display = "inline-block";
}
}
// Check if question should ignore inputs
if (ignore == 1) { // yes, ignore the inputs so move on to next question
console.log("path 1");
showNext();
} else { //no, don't ignore the inputs
var input = document.querySelector('input.input' + b);
if (input.type == "radio") { //this is a radio input
if (document.querySelector("#question" + b + " input[type=radio]:checked")) { //a radio option is selected
console.log("path 2");
showNext();
} else { // no radio option is selected so show error
console.log("path 3");
showRequired.style.display = "block";
}
} else { // not a radio input
if (input !== null) {
var currentInput = input.value;
}
if (currentInput == '') { // the input is blank so show error
console.log("path 4");
showRequired.style.display = "block";
} else { // the input is not blank so move on to next question
console.log("path 5");
showNext();
}
}
}
}
</script>
<div id="requiredMessage" style="display:none"><p>This field is required.</p></div>
<form id="TheForm" style="display:block;">
<div class="questionholder" id="question1" style="display:inline-block"> <!-- REQUIRED -->
<div style="display:inline-block">
<h5>Given Name</h5>
<input class="input1" name="gn"><br>
</div>
<div style="display:inline-block">
<h5>Last name</h5>
<input class="input1" name="ln"><br>
</div>
<div class="holdButtons">
<a class="text2button" onclick="displayquestion(2)">Next</a>
</div>
</div>
<div class="questionholder" id="question2" style="display:none"> <!-- REQUIRED -->
it worked!
</div>
</form>
我要特別關注這一部分的地方:
var input = document.querySelector('input.input' + b);
} else { // not a radio input
if (input !== null) {
var currentInput = input.value;
}
if (currentInput == '') { // the input is blank so show error
console.log("path 4");
showRequired.style.display = "block";
} else { // the input is not blank so move on to next question
console.log("path 5");
showNext();
}
}
該代碼的要旨是應要求用戶填寫兩個輸入字段。 如果EITHER輸入字段為空,則將出現錯誤消息。
但是,我的代碼僅在BOTH輸入字段為空白或僅第一個輸入字段為空白的情況下顯示錯誤。
如果第一個輸入字段已填寫,但第二個字段為空白,則應向用戶顯示錯誤消息-但這沒有發生。
據我了解,我的代碼實際上並沒有檢查兩個輸入字段,而是僅檢查兩個輸入字段是否為空,但是我不清楚如何糾正我的代碼以遍歷兩個輸入字段來檢查它們是否為空。都填寫。
請不要jQuery。 謝謝。
querySelector()
僅找到第一個匹配元素
對於多個輸入,您可以執行類似的操作
var inputsArray = Array.from(document.querySelectorAll(selector));
var isValid = inputsArray.every(function(el){
return el.value; // empty string is falsy
});
基本上使用Array#every()
基於每個具有值的元素返回一個布爾值。 您可以根據需要調整return
以進行更精細的驗證
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.