Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mahmudulhsn's avatar

Why laravel livewire is not reseting the form?

This is my validation

<?php

namespace App\Livewire\Forms;

use App\Models\Contact;
use Livewire\Attributes\Validate;
use Livewire\Form;

class PostForm extends Form
{
    #[Validate(['required', 'string'])]
    public $name = null;

    #[Validate(['required', 'string', 'email'])]
    public $email = null;

    #[Validate(['required', 'string'])]
    public $phone_no = null;

    #[Validate(['required', 'string'])]
    public $subject = null;

    #[Validate(['required', 'string'])]
    public $message = null;

    public function store()
    {
        $this->validate();

        Contact::create($this->all());

        // Reset form fields
        $this->resetForm();
    }

    public function resetForm()
    {
        $this->reset(['name', 'email', 'phone_no', 'subject', 'message']);
    }
}
<?php

namespace App\Livewire;

use App\Livewire\Forms\PostForm;
use Livewire\Component;

class ContactForm extends Component
{
    public PostForm $form;

    public function save()
    {
        $this->validate();
        $this->form->store();

        // Reset form fields
        $this->form->resetForm();

        // Dispatch success message
        $this->dispatch('swal', [
            'title' => 'Message has been sent.',
            'icon' => 'success',
            'iconColor' => 'blue',
        ]);
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}



<form wire:submit.prevent="save">
    <div class="row gx-4">
        <div class="col-md-6">
            <div class="form-floating mb-4">
                <input id="name" type="text" wire:model.blur="form.name" class="form-control" placeholder="Jane">
                <label for="name">Name *</label>
                @error('form.name')
                    <div class="text-red">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <!-- /column -->
        <div class="col-md-6">
            <div class="form-floating mb-4">
                <input id="email" type="email" wire:model.blur="form.email" class="form-control"
                    placeholder="[email protected]">
                <label for="email">Email *</label>
                @error('form.email')
                    <div class="text-red">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <!-- /column -->
        <div class="col-md-6">
            <div class="form-floating mb-4">
                <input id="subject" type="text" wire:model.blur="form.subject" class="form-control"
                    placeholder="Website required.">
                <label for="subject">Subject *</label>
                @error('form.subject')
                    <div class="text-red">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <!-- /column -->
        <div class="col-md-6">
            <div class="form-floating mb-4">
                <input id="phone_no" type="text" wire:model.blur="form.phone_no" class="form-control"
                    placeholder="Website required.">
                <label for="phone_no">Phone No. *</label>
                @error('form.phone_no')
                    <div class="text-red">{{ $message }}</div>
                @enderror
            </div>
        </div>
        <!-- /column -->
        <div class="col-12">
            <div class="form-floating mb-4">
                <textarea id="form_message" wire:model.blur="form.message" class="form-control" placeholder="Your message"
                    style="height: 150px"></textarea>
                <label for="form_message">Message *</label>
                <div class="valid-feedback"> Looks good! </div>
                <div class="invalid-feedback"> Please enter your message. </div>
            </div>
            @error('form.message')
                <div class="text-red">{{ $message }}</div>
            @enderror
        </div>
        <!-- /column -->
        <div class="col-12">
            <input type="submit" class="btn btn-primary rounded-pill btn-send mb-3" value="Send message">
            <p class="text-muted"><strong>*</strong> These fields are required.</p>
        </div>
        <!-- /column -->
    </div>
    <!-- /.row -->
</form>


I tried in many ways everything works fine but form reset is not working.
0 likes
3 replies
Snapey's avatar

try

$this->reset(['form.name', 'form.email', 'form.phone_no', 'form.subject', 'form.message']);

or even just

$this->reset(['form']);
mahmudulhsn's avatar

@Snapey Thanks. But I have solved this issue. In my case, the problem was Alpine js. I removed it from app.js then it works fine for me.

Please or to participate in this conversation.