实际上，我在所有这些输入字段中都使用了required属性，因为它们是强制性的。事实上，我使用的是条件选择选项，如果用户选择"是"，则会出现一个用户必须填写的必填输入字段，在这种情况下，我的提交按钮会工作，我会移动到下一页，但当用户选择"否"时，不会出现任何必填字段，在那种情况下，当我单击提交按钮时，它不会工作。如何解决此问题？我正在使用jquery。
$(document).ready(function() {
Orientation();
$("#to_check_recognition").change(function() {
Orientation();
});
});
function Orientation() {
if ($("#to_check_recognition").val() == 'yes')
$("#Average_orientation").show();
else
$("#Average_orientation").hide();
}<title> Cycle Time Calculation INSIGNUM</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" onsubmit="return ValidateForm(this);" style="width: 1200px; margin:0px auto">
<h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
<hr><br>
<p>Cycletime calcualation of module siyes between 5mil and 15mil</p>
<table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
<tr>
<td style="width: 50%">
<label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
<select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
<option value="" disabled selected> Please Select... </option>
<option value="yes"> Yes</option>
<option value="no"> No </option>
</select><br><br>
</td>
<td style="width: 50%">
<div id="Average_orientation" style="display: none;">
<label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
<input type="number" step="any" name="Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right; height: 225px">
<input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
</td>
</tr>
</table>
</form>这个问题是因为，尽管字段被隐藏在视图之外，但它仍然设置了required属性。因此，表单无法提交。要解决此问题，您需要在显示/隐藏字段时添加/删除该属性。
还要注意，JS代码不应该被随机地放置在table元素的中间。将其放在<head>中或放在</body>之前。
最后，不要使用内联事件属性，如onclick和onsubmit。请改用不引人注目的事件处理程序。同样，不要将CSS内联在HTML中。它应该从一个单独的样式表中应用。
说到这里，试试这个：
$(document).ready(function() {
Orientation();
$("#to_check_recognition").change(function() {
Orientation();
});
$('form').on('submit', function(e) {
console.log('form submitting...');
if (!ValidateForm(this)) {
e.preventDefault();
}
});
});
function Orientation() {
var averageReqd = $("#to_check_recognition").val() === 'yes';
$("#Average_orientation").toggle(averageReqd);
$('input[name="Average_orientation"]').prop('required', averageReqd);
}
function ValidateForm() {
// noop
}form {
width: 1200px;
margin: 0px auto;
}
table {
margin: 0px 40px;
}
table td {
width: 50%;
}
#to_check_recognition {
width: 350px;
height: 35px;
border-radius: 8px;
}
#Average_orientation {
display: none;
}
span,
span {
color: red;
}
#Average_orientation input {
width: 350px;
height: 25px;
border-radius: 8px;
}
td.foo {
text-align: right;
height: 225px;
}
td.foo input {
width: 200px;
height: 50px;
border-radius: 12px;
color: blue;
background: gold;
cursor: pointer;
}<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post">
<h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
<hr><br>
<p>Cycletime calcualation of module siyes between 5mil and 15mil</p>
<table border="0" cellpadding="18" cellspacing="10">
<tr>
<td>
<label for="to_check_recognition">
<b>
Do you have to check Orientation?
<span>*</span>
</b>
</label><br><br>
<select id="to_check_recognition" name="to_check_recognition" required>
<option value="" disabled selected>Please Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select><br><br>
</td>
<td>
<div id="Average_orientation">
<label for="Average_orientation">
<b>
Average amount of orientation check per panel
<span>*</span>
</b>
</label><br><br>
<input type="number" step="any" name="Average_orientation" required /><br><br>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="foo">
<button type="submit">Click To Submit</button>
</td>
</tr>
</table>
</form>