Laravel闪卡应用模态框输入空/短内容无法写入MySQL

我基于开源Flashcards闪卡应用进行Laravel二次开发，用于拉丁语学习。新增Notes字段后，应用可正常展示Front、Back和Notes内容，但编辑模态框存在异常：仅当字段内容长度≥2字符时，才能成功写入MySQL并收到成功提示；若字段为空或仅含1字符，既无成功提示，数据库也无更新，控制器中执行dd($card)无返回结果。

正常更新时dd($card)的返回结果：

Card {#240
  #fillable: array:3 [
    0 => "front"
    1 => "back"
    2 => "notes"
  ]
  #connection: "mysql"
  #table: "cards"
  #primaryKey: "id"
  #keyType: "int"
  +incrementing: true
  #with: []
  #withCount: []
  #perPage: 15
  +exists: true
  +wasRecentlyCreated: false
  #attributes: array:7 [
    "id" => 3493
    "created_at" => "2023-01-05 11:14:03"
    "updated_at" => "2023-01-07 05:01:20"
    "deck_id" => 1
    "front" => "Zdasdfsadf"
    "back" => "Zasdfsadf"
    "notes" => "Z"
  ]
  #original: array:7 [
    "id" => 3493
    "created_at" => "2023-01-05 11:14:03"
    "updated_at" => "2023-01-07 05:01:20"
    "deck_id" => 1
    "front" => "Zdasdfsadf"
    "back" => "Zasdfsadf"
    "notes" => "Zsdsfg"
  ]
  #changes: []
  #casts: []
  #dates: []
  #dateFormat: null
  #appends: []
  #dispatchesEvents: []
  #observables: []
  #relations: []
  #touches: []
  +timestamps: true
  #hidden: []
  #visible: []
  #guarded: array:1 [
    0 => "*"
  ]
}

问题定位 #

怀疑问题出在JavaScript的XHR请求部分，当前代码手动拼接URL参数，可能导致空值或单字符参数未被正确传递。相关代码如下：

编辑卡片的JS函数

function editCard(form){
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        //on success
        if (this.readyState == 4 && this.status == 200) {
            flashMessage(this.responseText); 
            form.reset(); 
            toggleModalCard('modal-edit');
            updateCards();
        }
    };
    let data = "?"+"front="+form["front"].value     
    +"&"+"back="+form["back"].value
    +"&"+"notes="+form["notes"].value
    + "&" + "id=" + deck.id;
    let card_id = document.getElementById('view-card').dataset.value;
    xhttp.open('PUT','{!! route('cards.index')!!}'+`/${card_id}`+data, true);
    console.log(data)
    let token =  document.querySelector('meta[name=csrf-token]').content
    xhttp.setRequestHeader('X-CSRF-Token', token);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send();
}

编辑模态框的HTML表单

<div id="modal-edit" class="modal">
    {{ Form::open(array('onsubmit' => 'editCard(this); return false;', 'class' =>'modal-content')) }}
        <div class="form-group">
            {{ Form::label('front', 'Front') }}
            {{ Form::text('front', '', ['class' => 'form-control', 'placeholder' => 'Front']) }}
        </div>
        <div class="form-group">
            {{ Form::label('back', 'Back') }}
            {{ Form::text('back', '', ['class' => 'form-control', 'placeholder' => 'Back']) }}
        </div>
        <div class="form-group">
        {{ Form::label('notes', 'Notes') }}
         {{ Form::textarea('notes', '', ['class' => 'form-control', 'placeholder' => 'Notes']) }}
         </div>
        {{  Form::submit('Save changes', ['class' => 'btn btn-primary']) }}
    {{  Form::close() }}
</div>

<div id="view-card" class="card">
    <div class="card-body">
        <p id="view-front" class="card-text">
        </p>
        <hr>
        <p id="view-back" class="card-text">
        </p>
            <p id="view-notes" class="card-text">
        </p>
    </div>  
    <div id="editCard">
        <button class="btn btn-primary" onclick="toggleModalCard('modal-edit')" data-toggle="tooltip" title="Edit card"><i class="fa fa-edit"></i></button>
    </div>
</div>

解决方案 #

1. 修复JS请求参数传递逻辑

替换手动拼接URL参数的方式，使用URLSearchParams自动处理URL编码和空值传递，确保所有参数（包括空值、单字符）都能正确发送：

function editCard(form){
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            flashMessage(this.responseText); 
            form.reset(); 
            toggleModalCard('modal-edit');
            updateCards();
        }
    };
    // 使用URLSearchParams构建参数
    const params = new URLSearchParams();
    params.append('front', form["front"].value);
    params.append('back', form["back"].value);
    params.append('notes', form["notes"].value);
    params.append('id', deck.id);
    
    let card_id = document.getElementById('view-card').dataset.value;
    xhttp.open('PUT', '{!! route('cards.index')!!}' + `/${card_id}?${params.toString()}`, true);
    
    let token = document.querySelector('meta[name=csrf-token]').content;
    xhttp.setRequestHeader('X-CSRF-Token', token);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send();
}

2. 检查Laravel控制器验证规则

确保CardsController的update方法中，验证规则没有强制要求字段长度≥2，允许空值和单字符：

public function update(Request $request, Card $card)
{
    $request->validate([
        'front' => 'nullable|string',
        'back' => 'nullable|string',
        'notes' => 'nullable|string',
    ]);
    
    $card->update($request->only(['front', 'back', 'notes']));
    
    return response()->json('Card updated successfully');
}

若原有验证规则包含min:2限制，需移除或改为nullable，确保空值和单字符能通过验证。

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