Laravel通过AJAX提交序列化表单触发验证报错「给定数据无效」如何解决

问题根因 #

• 你将表单序列化后的字符串封装到了formdata字段中提交，但你的表单请求验证规则是校验请求顶层的category/treatments等字段，后端无法匹配到对应字段，触发验证失败。
• 错误配置了processData: false参数：该参数仅在提交FormData类型数据时需要开启，你提交普通表单序列化数据时开启该参数会导致jQuery不处理请求参数，后端无法正常解析提交内容。

修复方案 #

方案1：直接提交序列化表单数据（无文件上传场景推荐） #

直接修改AJAX代码即可：

$('#btn-save-appointment').on('click', function(e) {
    e.preventDefault();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    });
    
    jQuery.ajax({
        url: "/saveAppointment",
        method: 'post',
        data: $('#appointment-event').serialize(), // 直接传序列化后的字符串，不要套formdata对象
        cache: false,
        // 删除原有的processData: false配置
        success: function(result){ 
          console.log('form: '+result);            
        },
        // 新增错误回调，可打印具体验证错误信息
        error: function (res) {
          console.log(res.responseJSON.errors);
        }
    });
 });

方案2：使用FormData提交（有文件上传场景适用） #

如果后续需要上传文件，可改为传递FormData对象：

$('#btn-save-appointment').on('click', function(e) {
    e.preventDefault();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    });
    // 构造FormData对象
    let formData = new FormData($('#appointment-event')[0]);
    jQuery.ajax({
        url: "/saveAppointment",
        method: 'post',
        data: formData,
        cache: false,
        processData : false, // 传FormData时需要保留这个配置
        contentType: false, // 传FormData需要额外加这个配置
        success: function(result){ 
          console.log('form: '+result);            
        },
        error: function (res) {
          console.log(res.responseJSON.errors);
        }
    });
 });

调试技巧 #

如果修改后还有验证报错，可查看error回调打印的errors对象，里面会明确标注哪个字段验证不通过、具体的失败原因。

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