Button still disabled even if the form are filled?

#1

I have a livewire form with some complex rules and disabled button if the form field are null or empty. logically if the form are filled the disabled button should be false but in my case it still disabled how I can fix this please ??

My Code :slight_smile:

<?php

namespace App\Http\Livewire;

use App\Models\User;
use Livewire\Component;

class ExampleForm extends Component
{
	public $name = '';
  public $email = '';
	public $isDisabled = false;
	
  protected $rules = [
     'name' => 'required|min:6',
     'email' => 'required|email',
  ];
  
	public function updated($propertyName)
	{
		$this->validateOnly($propertyName);
		
		if (empty($propertyName)) {
			$this->isDisabled = false;
		}
	}
	
    public function submitForm()
    {
        $validatedData = $this->validate();
        User::create($validatedData);
    }
	
    public function render()
    {
        return view('livewire.example-form');
    }
}

<form wire:submit.prevent="submitForm">
    <input type="text" wire:model="name">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="email" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit" disabled="{{ $isDisabled }}">Submit</button>
</form>
#2

And in wich moment the isDisabled property become “true”?

#3

in summary the disabled button should be true if the form field is null or empty that it

#4

ok, you’re trying to say something like this:

if (empty($propertyName)) {
   $this->isDisabled = false;
} else {
   $this->isDisabled = true;
}

can you try this please?

#5

I tried this now but it still the same issue the button still disabled even if the form are filled

#6

Ok, now in the blade try something in button like

@if($isDisabled)
<button type="submit">Submit</button>
@else
<button type="submit" disabled="disabled">Submit</button>
@endif

Possibly there is another simplest way to do it but this is my contribution. I test it and work

#7

I think if there is any idea can use this only in one button ?

#8

Inside that statement you can evaluate for every element that you want render in the view, I just answer for your specific question…if you have any other share it here

#9

Finally this work for you? And remember after submit get back to false that property

#10

thank you for your answer but this is not what I want to achieve