MTurk中crowd-input设置required后沙盒仍可空提交如何解决

问题原因 #

<crowd-input>标签上的required属性默认不生效，核心原因是MTurk的众包组件校验逻辑没有和平台内置的任务提交按钮绑定，若未使用官方指定的表单容器，空值不会触发提交拦截。

可行方案 #

方案1：使用官方标准容器crowd-form（优先推荐） #

所有crowd系列交互组件必须嵌套在<crowd-form>容器内，组件内置的required等校验规则才会自动对接提交流程，这是官方原生支持的写法，不需要额外写自定义脚本：

<!-- 注意：不要用普通<form>标签替代crowd-form -->
<crowd-form>
  <crowd-input name="Comment" placeholder="Explain why" required></crowd-input>
  <!-- 其余任务交互组件统一放在crowd-form内部 -->
</crowd-form>

方案2：自定义提交拦截逻辑（兜底100%生效） #

如果已经使用<crowd-form>仍然存在校验失效的问题，可以通过监听表单提交事件手动做值校验，空值时直接阻断提交并提示工人：

<crowd-form id="taskForm">
  <crowd-input name="Comment" id="commentField" placeholder="Explain why" required></crowd-input>
</crowd-form>

<script>
const taskForm = document.querySelector('#taskForm');
const commentField = document.querySelector('#commentField');

taskForm.addEventListener('submit', function(e) {
  const inputContent = commentField.value.trim();
  if (!inputContent) {
    e.preventDefault();
    alert('请填写理由字段后再提交任务');
    commentField.focus();
    // 可选：给空输入框加红框高亮提示
    commentField.style.borderColor = '#ff3b30';
    return false;
  }
})
</script>

注意事项 #

• 禁止用普通HTML<form>标签替代<crowd-form>，否则会出现答案无法正常回传、提交按钮逻辑异常的问题
• 沙盒测试前先清理浏览器缓存，避免旧版脚本缓存导致校验逻辑不生效
• 不要给必填的crowd-input加disabled/hidden属性，否则会导致取值异常，校验逻辑误判

内容的提问来源于stack exchange，提问作者NivB