Я просмотрел несколько похожих тем, но не нашел надежного ответа на этот вопрос. Я пытаюсь проверить значение переключателей, чтобы вы не могли перейти к следующей вкладке, пока не будет выбран один из вариантов. Это просто MCVE кода, на исходной странице будет более 50 радиополей, поэтому я хотел бы сделать это как можно более широко. Изменяя функцию validateForm, я пытался разработать какой-то код, который подтверждает тип ввода поля, получает имя этого поля, а затем проверяет, имеет ли это имя значение, я экспериментировал с использованием onclick = "this.value = 'x' ", поэтому не будет никакого значения, пока оно не будет выбрано, хотя я удалил его ради mcve. Не уверен, что это возможно, хотя я не знаю, почему этого не произойдет, это кажется достаточно правдоподобным, хотя все, что я пробовал, провалилось.
Вот мой MCVE:
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable:no"/></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<style>
input.invalid {
background-color: #ffdddd;
}
.tab {
height: 0;
overflow: hidden;
}
button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Arial;
cursor: pointer;
}
#prevBtn {
background-color: #bbbbbb;
}
</style>
<body>
<form id="regForm" action="/action_page.php">
<div class="tab tab1">
Location:
<table id= "Address">
<tr>
<td>PDX</td>
<td>EUG</td>
<td>SEA</td>
<td>SFO</td>
</tr>
<tr>
<td><input type="radio" id="PDX" oninput="this.className = ''" name="Address" value="PDX"></td>
<td><input type="radio" id="EUG" oninput="this.className = ''" name="Address" value="EUG"></td>
<td><input type="radio" id="SEA" oninput="this.className = ''" name="Address" value="SEA"></td>
<td><input type="radio" id="SFO" oninput="this.className = ''" name="Address" value="SFO"></td>
</tr>
</table>
</div>
<div class="tab tab2">
Driver Performing Inspection:
<p><input type="text" oninput="this.className = ''" name="drivername" placeholder="Your full name"></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<div>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.height = "100%";
x[n].style.overflow = "visible";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
document.getElementById("nextBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").style.display = "none";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.height = "0";
x[currentTab].style.overflow = "hidden";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
$("regForm").submit(function(){renderSignature();saveImage();
});
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
</script>
</body>
</html>
и место для просмотра кода в действии: https://www.w3schools.com/code/tryit.asp?filename=G8I5NEPXLJK5