No solution : Disabled submit button if form fields are null or empty

I'm still wondering about "how to disabled submit button if form fields are null or empty"? I try many tips and tricks but none of that is working as a expected.

What I want to achieve with all of this :

1: If the form fields (all fields) are null or empty normally the submit button should be disabled

2: if the user has update or remove a value from one or more of those fields dynamicly the submit button should return "Disabled".

My Codes :

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ExampleForm extends Component
{
	public $name = '';
	public $email = '';
	public $password = '';
	
	public $disabled = true;
	
    protected $rules = [
        'name' => 'required|min:6',
        'email' => 'required|email',
		'password' => 'required|min:6',
    ];
	
	public function updated($fields)
	{
		$this->validateOnly($fields);
		
		if(!is_null($fields) && !empty($fields)) {
			$this->$disabled = false;
		} else {
			$this->$disabled = true;
		}
	}
	
    public function submitForm()
    {
        $validatedData = $this->validate();
		
		Example::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="text" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror
	
    <input type="password" wire:model="password">
    @error('password') <span class="error">{{ $message }}</span> @enderror

    <button type="submit" {{ $disabled ? 'disabled' : '' }}>Submit</button>
</form>

AlexElementarteilchen

5 years ago

Best Answer

Level 9

Hi,

the updated($field) method gives you only the currently updated field (not an array of all fields).

I think you need to add some logic to keep track of the current validation state for each field - Livewire won't do that for you automatically (at least I don't know how)

See the code below.

The idea is to have an array which holds an entry for each field when the field is validated.

validateOnly($field)returns an array when the validation passes.

The array has one key ($field) and the value is the input from the field.

If the validation does not pass you get an empty array as a return value.

So in updated($field) we store that in $this->validated_fields.

In updating($field)we need to clear the result from the last validationOnly call or else Livewire won't forget the last value. This means when the validation passes once it is never updated - not even when the user removes the input from the field. Therefor we need to clear it every time.

Then in render()we check if our validated_fields array has 3 entries (it means all 3 fields are validated) and set the $disabledvariable.

Hope this helps!

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Arr;

class ExampleForm extends Component
{
	public $name = '';
	public $email = '';
	public $password = '';

	public $validated_fields;
	public $disabled = true;
	
    protected $rules = [
        'name' => 'required|min:6',
        'email' => 'required|numeric',
		'password' => 'required|min:3',
    ];
	
	public function mount()
	{
		 $this->validated_fields = [];
	}

	public function updating($field) 
	{
		Arr::pull($this->validated_fields, $field);
	}

	public function updated($field)
	{
		$v = $this->validateOnly($field);
		$this->validated_fields[$field] = Arr::get($v, $field, false);		
	}
	
    public function submitForm()
    {
        $validatedData = $this->validate();
	}
    
    public function render()
    {
    	$this->disabled = count($this->validated_fields) <> 3;
        return view('livewire.example-form');
    }
}

devhoussam123

5 years ago

Level 2

thank you so mush for your help

1 like

Please or to participate in this conversation.