如何用JavaScript设置subcategory为必填项？及required属性失效排查

嘿，我来帮你搞定这几个表单验证的问题！

1. 如何用JavaScript将id="subcategory"设置为必填项？ #

有两种常用的方式，你可以根据场景选择：

• 直接设置元素的required属性
  如果你只是想让元素本身具备必填规则，直接获取DOM元素后修改required属性就行：

  // 获取subcategory元素
  const subcategoryEl = document.getElementById('subcategory');
  // 设置为必填
  subcategoryEl.required = true;
  

• 表单提交时手动验证
  要是你需要自定义验证逻辑（比如配合AJAX提交，不想用浏览器默认提示），可以监听表单的submit事件，手动检查：

  const form = document.querySelector('form');
  const subcategoryEl = document.getElementById('subcategory');
  
  form.addEventListener('submit', function(e) {
    // 根据元素类型调整判断逻辑，比如select看value、input看输入内容
    if (!subcategoryEl.value.trim()) {
      e.preventDefault(); // 阻止表单提交
      alert('子分类为必填项，请选择或填写！');
      // 也可以调用原生方法触发浏览器默认验证提示
      subcategoryEl.reportValidity();
    }
  });
  

2. 模型类型设为必填 + subcategory的required不生效的原因 #

把首次选择的模型类型设为必填项 #

假设你的模型类型是<select>或<input>控件，同样可以用类似的方式设置必填：

// 假设模型类型的id是model-type
const modelTypeEl = document.getElementById('model-type');
modelTypeEl.required = true;

如果是下拉框，记得给默认选项设置value=""，这样浏览器默认验证会强制用户选择非空选项：

<select id="model-type">
  <option value="">请选择模型类型</option>
  <option value="type1">类型1</option>
  <option value="type2">类型2</option>
</select>

为什么id="subcategory"的required属性不生效？ #

常见的几个原因，你可以逐一排查：

• 元素不是表单控件：required属性只对<input>、<select>、<textarea>这些表单元素生效，如果你的subcategory是<div>或其他非表单标签，自然不会生效；
• 元素不在<form>标签内：浏览器的默认表单验证只会对<form>包裹内的元素生效，如果subcategory在form外部，即使加了required也不会触发验证；
• 元素被设置了disabled/readonly：如果subcategory被标记为disabled或者readonly，浏览器会忽略它的required属性；
• JS代码覆盖了属性：可能有其他脚本在后续执行中把subcategory.required改成了false，可以检查代码的执行顺序；
• 表单提交未触发默认验证：如果是用JS手动调用form.submit()提交表单，浏览器不会自动触发验证，需要你手动调用form.checkValidity()或subcategoryEl.checkValidity()来触发。

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