How to disable submit button whenever the form fields are empty? - laravel-8

Question

I have a login form with some input fields such as "email" and "password". This form is created with real-time validation by Laravel and Livewire. Until now, everything is good.
With the livewire rules I want to disable the submit button if the form fields are null or empty with Alpine.js. How do I do that?
app\Http\Livewire\LoginForm
class LoginForm extends Component
{
public $email = '';
public $password = '';
protected $rules = [
'email' => 'required|email',
'password' => 'required|min:12',
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function saveUser()
{
$validatedData = $this->validate();
User::create($validatedData);
}
}
LoginForm Component
<form wire:submit.prevent="saveUser">
<input type="email" wire:model="email" class="form-control">
#error('email') <span class="error">{{ $message }}</span> #enderror
<input type="password" wire:model="password" class="form-control">
#error('password') <span class="error">{{ $message }}</span> #enderror
<button type="submit">Login Now</button>
</form>

Answer 1

How about simply checking for the value iteself using blade
<button type="submit" {{ (!is_null($email) && !empty($email) && !is_null($password) && !empty($password)) ? '' : 'disabled' }}>Login Now</button>

Answer 2

In you component you can use a separate property public bool $canBeSubmitted which hold the enabled/disabled state for the button.
class LoginForm extends Component
{
public $email = '';
public $password = '';
/**
* Toggle disabled state of submit button
*/
public bool $canBeSubmitted = false;
protected $rules = [
'email' => 'required|email',
'password' => 'required|min:12',
];
public function updated($email)
{
$this->validateOnly($propertyName);
// Setting $canBeSubmitted to true/false
}
public function saveUser()
{
$validatedData = $this->validate();
User::create($validatedData);
}
}
<form wire:submit.prevent="saveUser">
<!-- inputs -->
<button type="submit" {{ !empty($canBeSubmitted)) ? '' : 'disabled' }}>Login Now</button>
</form>
AlpineJS and Livewire
To have access to the canBeSubmitted property from both, AlpineJS and Livewire, you can make use of the entangled feature.
From the docs:
Livewire has an incredibly powerful feature called "entangle" that allows you to "entangle" a Livewire and Alpine property together. With entanglement, when one value changes, the other will also be changed.