模态输入字段 (Javascript / xhttprequestheader) 写入 mysql 但仅针对字符串中的 > 0 个字符时发生了奇怪的事情？

Question

I am using a Flashcards application from GitHub.
I am building this to learn Latin but decided to use existing code. It works in Laravel and all good. I added a Notes field to the application so it shows Front, Back and Notes.

BUT I am finding that when I edit and update the input fields in the model all good EXCEPT if there is no input left in the fields. For any field with more than no characters I get the success message and look at mysql table and the information is there. But with no character in any of the 3 input fields I do not get the success message and no change in mysql table. This is what I receive back from a dd($card); in the controller update request:

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 => "*"
  ]
}

if a field is empty then I do not get anything back from the dd($card); in controller. <COULD THIS BE RELATED TO THE ISSUE HERE: https://github.com/Laravel-Backpack/CRUD/issues/1816

The area I am looking at (I beleive is causing the problem within Laravel structure) is Javascript and code is below. Ie Controller is set up per link in Github below:

    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();
                //now in updateCards()
                
              /*  document.getElementById('view-front').innerHTML = '';
                document.getElementById('view-back').innerHTML = '';
                delete document.getElementById('view-card').dataset.value;*/
            }
        };
        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();

The form is below:
    <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" onsubmit="if(this == ''){$this.val('empty');}"><i class="fa fa-edit"></i></button>
        </div>
    </div>
</div>

I am stumped: The original code which also does not work correctly is here: https://github.com/Jondev01/flashcards I tried to reach out to the programmer but no feedback. Hope someone has seen this before and can make sense of this.

I try to get input fields with less than 2 characters to save to the mysql database. < 2 does not save but 2 and > does.

Answer 1

Hi I solved my own problem. I only needed to remove the following:

public function update(Request $request, $id)
{
/*    $this->validate($request, [
        'front' => 'required',
        'back' => 'required',
        'notes' => 'required',  
      ]);  
*/