使用DataTable与Ajax时新增功能失效，填有效信息仍提示姓名必填

场景匹配 #

你的update、delete功能运行正常，说明Ajax请求逻辑、后端接口、数据库操作的基础链路是通的；新增时仅触发「Name is required」报错、没有出现邮箱必填提示，核心线索是邮箱字段的POST数据能正常传到后端，仅姓名字段没有被正确收集到请求中。 #

高概率根因（按常见度排序） #

1. 新增弹窗打开时，未清除上一次编辑流程给输入框残留的disabled属性 #

这是新手抄Bootstrap+CodeIgniter CRUD模板最容易踩的坑：
很多人为了实现「编辑时不允许修改姓名」的需求，会在编辑逻辑里给姓名输入框加disabled属性——注意：被设置了disabled的表单元素，无论输入框里填写了什么内容，都不会被FormData收集，自然也不会传给后端。
而打开新增弹窗时，没有把这个残留的disabled属性移除，就会出现你看到的现象：输入框看起来正常，能填字、能显示内容，但提交的时候姓名字段的值根本没被打包进请求，后端读到空值就触发必填校验。

为什么update功能是正常的？因为编辑流程本身就是禁用姓名输入的，后端更新逻辑本来也不需要更新姓名字段，只需要更新邮箱，所以不会因为姓名字段为空触发报错。

修复方法

在add_person()函数里，打开弹窗前清除所有输入框的禁用状态：

function add_person() {
    save_method = 'add';
    $('#form')[0].reset();
    // 清除残留的禁用属性
    $('#form input').removeAttr('disabled');
    // 清除上次操作留下的错误提示样式
    $('.form-group').removeClass('has-error');
    $('.help-block').empty();
    $('.modal-title').text('Add Person');
    $('#modal_form').modal('show');
}

2. 表单标签嵌套位置错误，被浏览器自动修正DOM结构导致收集失效 #

你贴的视图代码里，表单的闭合标签位置不符合规范：
表单<form id="form">的开标签写在modal-body容器内，但提前关闭了modal-body的div容器，直到modal-footer区域才补form的闭合标签。这种跨容器的标签嵌套会被浏览器的容错解析机制自动修正，部分场景下靠前的姓名输入框会被判定为不属于form的子节点，导致FormData收集不到这个字段；而靠后的邮箱输入框刚好在form的范围内，所以能正常传值。

修复方法

把form标签的闭合位置移到modal-body容器内部，不要跨层嵌套，修正后的结构参考：

<div class="modal-body form">
  <form action="#" id="form" class="form-horizontal">
    <input type="hidden" value="" name="id"/> 
    <div class="form-body">
      <!-- 姓名、邮箱输入框 -->
    </div>
  <!-- 在这里闭合form，不要把footer区域包进表单 -->
  </form>
</div>
<div class="modal-footer">
  <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>

3. 存在重复的同名字段覆盖请求值 #

如果DOM里藏了一个<input name="name" value="">的隐藏空字段，位置在真实姓名输入框的后面，FormData收集时会用后面的空值覆盖前面输入的有效姓名，后端读到空值就触发校验。因为邮箱字段没有同名字段，所以不会出现这个问题。

排查方法

在浏览器控制台执行以下代码，检查所有姓名字段的状态：

$('[name="name"]').each(function() {
    console.log('元素信息:', this, '当前值:', $(this).val());
})

如果发现多余的空值同名字段，直接删除即可。 #

10秒快速定位技巧 #

在save()函数创建FormData的位置，加一段日志打印实际收集到的所有字段，不用猜问题：

var formData = new FormData($('#form')[0]);
// 打印所有提交的字段
for (let [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
}

打开浏览器控制台点提交，就能直接看到姓名字段有没有被收集、值是不是你输入的内容，第一时间定位问题。 #

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