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

devhoussam123's avatar

Alpine.js disable submit button whenever the form fields are empty?

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>
0 likes
10 replies
bugsysha's avatar

Why complicate things? When using Livewire you should put front-end logic in Livewire components. But why do you care about disabled state when it will not be submitted due to failed validation?

devhoussam123's avatar

it's not about complicate things I'm trying to do same things with Alpine.js.

bugsysha's avatar

But you shouldn't do it with Alpine. That is my point.

bugsysha's avatar

Yeah, do not worry about such things that are covered by validation.

jlrdw's avatar

If you really want that functionality, use vanilla Js. Vanilla Js works with all of the various JavaScript packages and libraries.

But don't skip back end validation neither.

chaudigv's avatar

Create a boolean to make sure of the disable state

public $isDisabled = true;

// To validate an input field after every update, we can use Livewire's updated hook
public function updated()
{
    if(!is_null($email) && !empty($email) && !is_null($password) && !empty($password)) {
        $isDisabled = false;
    } else {
        $isDisabled = true;
    }
}

In your blade component

<button type="submit" {{ $isDisabled ? 'disabled' : '' }}>Login Now</button>
1 like
devhoussam123's avatar

but why it still disabled even if the form is filled ?


public $email;
public $password;
public $isDisabled = true;

protected $rules = [
        'email' => 'required|email',
        'password' => 'required',
];

public function updated($propertyName)
	{
	$this->validateOnly($propertyName);
		
	if(!is_null($propertyName) && !empty($propertyName)) {
		$isDisabled = false;
	} else {
		$isDisabled = true;
	}
}

 public function saveUser()
{
        $validatedData = $this->validate();

        User::create($validatedData);
}
<button type="submit" {{ $isDisabled ? 'disabled' : '' }}>Login Now</button>
cristache's avatar

Hello, I did something like this:

	public $isDisabled = true;

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);

		// Create an array with all your props
        $props = ['prop1', 'prop2', 'prop3', 'prop4']; 
        $errors = array_filter($props, fn($prop) => empty($this->$prop));

        if(count($errors) == 0) $this->isDisabled = false;
    }

Hope it will help you :)

jlrdw's avatar
function checkForm() {
  var x = document.forms["your_Form"]["your_field"].value;
  if (x == "") {
    alert("Field required");
    return false;
  }
} 

But instead of alert, maybe display a hidden message.

You could also loop the form and enable submit if all required are filled:

document.getElementById("your_Submit").disabled = true;

Just practice this on a test form until you have it worked out. Because some fields may be allowed to be blank.

But there are numerous examples of this in the web.

Please or to participate in this conversation.