CodeIgniter4：模态框提交前的表单验证问题求助

即使输入字段为空，提交功能仍会执行，input的required属性未生效，如何在提交前完成输入字段的验证？

视图中的模态框代码 #

<div class="modal fade" tabindex="-1" role="dialog" id="Ad_ModSY">
   <form class="needs-validation" novalidate="" data-async data-target="#AddFormDialog">
      <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title">学年设置</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="form-row">
                  <div class="form-group col-md-6">
                     <label>起始年份</label>
                     <input type="number" class="form-control" name="a_year_from" id="a_year_from" required>
                     <div class="invalid-feedback">
                        请输入学年起始年份。
                     </div>
                  </div>
                  <div class="form-group col-md-6">
                     <label>结束年份</label>
                     <input type="number" class="form-control" name="a_year_to" id="a_year_to" required>
                     <div class="invalid-feedback">
                        请输入学年结束年份。
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <label>学期</label>
                  <input type="text" class="form-control" placeholder="输入学期" name="a_sy_term" id="a_sy_term" required>
                     <div class="invalid-feedback">
                        请输入学期信息。
                     </div>
               </div>
            </div>
            <div class="modal-footer bg-whitesmoke br">
               <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times-circle"></i> 关闭</button>
               <button type="submit" class="btn btn-primary add-sy"><i class="fas fa-save"></i> 保存</button>
            </div>
         </div>
      </div>
   </form>
</div>

AJAX脚本代码 #

$(".add-sy").click(function(){

      var a_year_from = $('#a_year_from').val();
      var a_year_to = $('#a_year_to').val();

      let year = a_year_from.concat("-",a_year_to.toString());

      var data = {
        'year': year,
        'sy_term': $('#a_sy_term').val(),
      }

      $.ajax({
        method: "POST",
        url: "<?php echo site_url(); ?>Add-School-Year",
        data: data,
        success: function(response){

          $('#Ad_ModSY').modal('hide');
          location.reload();

        }
      });

    });

控制器代码 #

public function SY_Add()
    {

        $model = new Mod_SY();
        $data = [
            'year' => $this->request->getPost('year'),
            'sy_term' => $this->request->getPost('sy_term')
        ];


        $model->save($data);

        $_SESSION['message'] = 
        '<div class="alert alert-success alert-dismissible show fade">
          <div class="alert-body">
              <button class="close" data-dismiss="alert">
                <span>&times;</span>
              </button>
              数据添加成功！
          </div>
        </div>';

        session()->markAsFlashdata("message");
        return $this->response->setJSON($data);


    }

问题原因 #

直接给提交按钮绑定click事件会跳过浏览器原生的表单验证流程，导致required属性无法触发验证逻辑。

修复方案 #

1. 切换为监听表单submit事件 #

修改AJAX脚本，监听表单的submit事件，先触发原生验证，通过后再执行AJAX提交：

$(".needs-validation").submit(function(e){
    // 阻止默认表单提交行为
    e.preventDefault();

    // 触发原生表单验证
    if (this.checkValidity() === false) {
        e.stopPropagation();
    } else {
        // 验证通过，执行AJAX逻辑
        var a_year_from = $('#a_year_from').val();
        var a_year_to = $('#a_year_to').val();
        let year = a_year_from.concat("-", a_year_to.toString());

        var data = {
            'year': year,
            'sy_term': $('#a_sy_term').val(),
        }

        $.ajax({
            method: "POST",
            url: "<?php echo site_url(); ?>Add-School-Year",
            data: data,
            success: function(response){
                $('#Ad_ModSY').modal('hide');
                location.reload();
            }
        });
    }

    // 添加Bootstrap验证样式，显示错误提示
    this.classList.add('was-validated');
});

2. 保留Bootstrap验证样式 #

表单已有的needs-validation和novalidate属性配合was-validated类，会自动显示你定义的invalid-feedback错误提示。

3. 自定义额外验证（可选） #

如果需要年份逻辑验证（比如结束年份大于起始年份），可以在验证通过后添加：

// 在else块内、AJAX请求前添加
if (parseInt(a_year_to) <= parseInt(a_year_from)) {
    alert('结束年份必须大于起始年份');
    return;
}

4. 后端强制二次验证 #

前端验证仅为用户体验优化，后端必须做严格验证，防止非法数据：

public function SY_Add()
{
    $year = $this->request->getPost('year');
    $sy_term = $this->request->getPost('sy_term');

    // 验证必填字段
    if (empty($year) || empty($sy_term)) {
        return $this->response->setJSON([
            'status' => 'error',
            'message' => '所有字段均为必填项'
        ]);
    }

    // 验证学年格式有效性
    $yearParts = explode('-', $year);
    if (count($yearParts) != 2 || !is_numeric($yearParts[0]) || !is_numeric($yearParts[1]) || $yearParts[1] <= $yearParts[0]) {
        return $this->response->setJSON([
            'status' => 'error',
            'message' => '学年格式错误，结束年份必须大于起始年份'
        ]);
    }

    $model = new Mod_SY();
    $data = [
        'year' => $year,
        'sy_term' => $sy_term
    ];

    $model->save($data);

    $_SESSION['message'] = 
    '<div class="alert alert-success alert-dismissible show fade">
        <div class="alert-body">
            <button class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
            数据添加成功！
        </div>
    </div>';

    session()->markAsFlashdata("message");
    return $this->response->setJSON([
        'status' => 'success',
        'data' => $data
    ]);
}

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