CodeIgniter框架下表单required属性不生效的修复方法咨询

HTML原生required属性仅在使用标准<button type="submit">/<input type="submit">触发表单提交时才会生效。你当前使用<a>标签作为入口，点击后直接执行href链接跳转，不会触发表单验证逻辑，同时也不会自动把尺码、颜色参数传递到后端接口。
另外你的下拉选默认选中项没有设置空value，部分浏览器会无法正确触发select的required校验。

方案1：原生表单提交（最简实现，无需JS） #

直接将提交入口替换为原生submit按钮，把提交地址填写到form的action属性中即可，修改后代码如下：

<form action="<?php echo site_url('homecontroller/buy/'.$product->id); ?>" method="post">
  <input class="form-check-input" type="radio" name="size" id="rad" value="xssize" required>

  <select name="color" class="form-select" aria-label="Default select example" required>
    <!-- 增加空value保证required校验生效 -->
    <option selected disabled value="">Select Item Color</option>
    <option value="RED">RED</option>
  </select>

  <button type="submit" class="btn btn-to-cart">
    <span class="bag"></span>
    <span>Add To cart</span>
    <div class="clearfix"></div>
  </button>
</form>

如果按钮原有样式是绑定给<a>标签的，直接给btn-to-cart类补充button标签的样式重置即可，不会影响原有视觉效果。

方案2：保留a标签结构，通过JS手动触发校验 #

如果因为业务逻辑必须保留<a>标签结构，可以新增JS逻辑手动触发表单验证，代码如下：

<form id="cartForm" action="<?php echo site_url('homecontroller/buy/'.$product->id); ?>" method="post">
  <input class="form-check-input" type="radio" name="size" id="rad" value="xssize" required>

  <select name="color" class="form-select" aria-label="Default select example" required>
    <option selected disabled value="">Select Item Color</option>
    <option value="RED">RED</option>
  </select>

  <a id="postGender" href="javascript:void(0)" class="btn btn-to-cart">
    <span class="bag"></span>
    <span>Add To cart</span>
    <div class="clearfix"></div>
  </a>
</form>

<script>
document.getElementById('postGender').addEventListener('click', function() {
  const cartForm = document.getElementById('cartForm');
  // 手动触发表单原生校验
  if (cartForm.reportValidity()) {
    cartForm.submit();
  }
});
</script>

前端验证可以被用户绕过，一定要在后端homecontroller的buy方法中补充参数校验，判断接收到的size和color参数是否存在且合法，避免出现脏数据。

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