Form submitting twice if form validation fails first time

#1

Hi all, I am pretty new to Livewire, like it so far but I have ran into an issue.

I have a form that requires two fields to have values, if the user doesn’t enter info into both fields validation fails and shows the error, the user then enters the requires data and presses submit again, validation passes and two results are entered into the database. It like the first request is queued up.

Any help would be appreciated.

Here is my view :




<div wire:loading.remove>

    <div id="add-gallery-container" class="card card-bordered mb-3" style="display: none">
        <div class="card-header">
            <h5>New gallery</h5>
        </div>
        <div class="card-body">
            <form id="add-new-gallery" wire:submit.prevent="save">
                <div class="form-group">
                    <label>Name of your gallery</label>
                    <input wire:model.defer="title" class="form-input" placeholder="Name of your gallery">
                </div>

                <div class="form-group mt-3">
                    <label>Gallery description</label>
                    <textarea wire:model.defer="description" class="form-input" placeholder="Add an optional description to your gallery"></textarea>
                </div>

                <div class="form-group mt-3">
                    <label>Gallery visibility</label><br>
                    <input type="radio" name="status" wire:model.defer="status" id="status-public" value="public"> Public (visible on profile) <br>
                    <input type="radio" name="status" wire:model.defer="status" id="status-private" value="private"> Private (visible to you only) <br>
                </div>

                <button type="submit" class="button button-primary mt-3" wire:loading.attr="disabled">Save</button>
            </form>
        </div>
    </div>

And here is the component class :

// New gallery
public $gallery;
public $company_id;
public $title = null;
public $description = null;
public $status = null;

protected $rules = [
    'title' => 'required',
    'description' => 'nullable',
    'status' => 'required',
];

public function mount($company_id)
{
    $this->company_id = $company_id;
    $this->loadGallery();
}

public function loadGallery()
{
    $this->gallery = GalleryModel::with(['media'])->where('company_id', $this->company_id)->get();
}

public function render()
{
    return view('livewire.gallery');
}

public function save()
{
    $validated = $this->validate();


    //dump($validated);
    DB::beginTransaction();
    try {

        $validated['company_id'] = $this->company_id;
        if(!GalleryModel::create($validated))
        {
            Throw new \Exception('Failed to create gallery');
        }

        DB::commit();

        session()->flash('success', $this->title.' has been added.');

        return $this->loadGallery();

    } catch (\Throwable $e) {
        DB::rollBack();
        report($e);
    }

    return session()->flash('error', 'Failed to create gallery');
}