本文详解如何为动态生成的多类别问卷表单添加前端强制验证，确保用户必须为每个问题选择一项答案后才能进入下一页或提交，避免因未答题导致评分异常。核心方案包括html5 required 属性、jquery 表单状态校验及分步导航逻辑修复。
在您当前的多步骤问卷系统中，虽然已为每个单选按钮添加了 required 属性，但实际无法触发浏览器原生验证，根本原因在于：同一组 的 name 属性虽动态生成（如 answer[1][5]），但每组仅有一个 radio 元素被标记为 required，而 HTML5 规范要求 —— 只有当整组 radio 中至少一个被设为 required 且无任何选项被选中时，才会触发验证。但由于您为每个选项都加了 required，浏览器会错误地认为“只要任一 radio 被聚焦即满足要求”，导致验证失效。
更关键的是，您使用的 jQuery 分步导航脚本（.next-form 点击事件）完全绕过了表单验证流程：它只是隐藏/显示 fieldset，并未检查当前页所有问题是否已作答。因此即使用户跳过全部题目，点击“Next”仍可前进。
✅ 正确解决方案需三步协同：
1. 修正 HTML 结构：每组 radio 仅需一个 required
将 required 属性统一加在每组的第一个选项（如“Strongly Agree”），而非全部。这样浏览器才能正确识别该组为必填项：
立即学习“PHP免费学习笔记（深入）”；
<!-- ✅ 正确写法：每组仅第一个 radio 带 required -->
<div class="form-check">
<input class="form-check-input"
type="radio"
name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]"
value="5"
required> <!-- ← 仅此处 required -->
<label class="form-check-label">Strongly Agree</label>
</div>
<div class="form-check">
<input class="form-check-input"
type="radio"
name="answer[<?php echo $row['id'] ?>][<?php echo $question_row['id'] ?>]"
value="4">
<label class="form-check-label">Agree</label>
</div>
<!-- 其余选项均不加 required -->2. 增强 jQuery 导航：点击“Next”前主动校验当前页
修改您的分步脚本，在切换页面前遍历当前 fieldset 内所有 radio 组，检查是否每组均有选中值：
$(document).ready(function() {
var form_count = 1;
var total_forms = $("fieldset").length;
$(".next-form").click(function() {
var currentFieldset = $(this).closest("fieldset");
// ✅ 校验当前页：遍历所有 question_id 对应的 radio 组
var allAnswered = true;
currentFieldset.find('input[type="radio"]').each(function() {
var groupName = $(this).attr('name');
// 检查该组是否有任意选项被选中
if ($('input[name="' + groupName + '"]:checked').length === 0) {
allAnswered = false;
return false; // 退出循环
}
});
if (!allAnswered) {
alert("⚠️ 请回答本页所有问题后继续！");
return; // 阻止跳转
}
// ✅ 安全跳转
currentFieldset.hide();
currentFieldset.next("fieldset").show();
setProgressBarValue(++form_count);
});
// 提交按钮也需校验（防直接点击 Submit）
$("#submit_form").click(function(e) {
e.preventDefault(); // 阻止默认提交
var lastFieldset = $("fieldset").last();
var allAnswered = true;
lastFieldset.find('input[type="radio"]').each(function() {
var groupName = $(this).attr('name');
if ($('input[name="' + groupName + '"]:checked').length === 0) {
allAnswered = false;
return false;
}
});
if (allAnswered) {
$("#register_form").submit(); // 手动触发表单提交
} else {
alert("⚠️ 请完成所有题目后再提交！");
}
});
});3. 后端兜底验证（重要！）
前端验证可被绕过，务必在 applicantAssessmentSave.php 中增加服务端校验：
// applicantAssessmentSave.php 示例校验逻辑
foreach ($_POST['cat_id'] as $index => $cat_id) {
$questions = $_POST['question_id'][$cat_id] ?? [];
foreach ($questions as $q_id => $qid_val) {
$answer_key = "answer[$cat_id][$q_id]";
if (!isset($_POST[$answer_key]) || !in_array($_POST[$answer_key], ['1','2','3','4','5'])) {
die("错误：问题 ID $q_id 未作答或答案无效！");
}
}
}
// 继续保存逻辑...⚠️ 注意事项
- 不要依赖 Bootstrap 类名触发验证：.btn-primary 或 .btn-info 等样式类与表单验证无关，移除它们不影响功能；重点是 required 属性和 JavaScript 校验逻辑。
- 避免 SQL 注入风险：您当前的查询使用了拼接字符串（cat_id='".$id."'），强烈建议改用预处理语句（PDO/MySQLi prepared statements）。
- 用户体验优化：可为未答题的 radio 组添加红色边框或提示文字（如 style="border:2px solid #dc3545"），提升可感知性。
通过以上调整，您的表单将真正实现“未答题不可前进/提交”，保障评估数据的完整性与有效性。
