I’m wondering about how I can switch between classes in Livewire real time form validation? let’s imagine that i have a form with some input fields such as (email) inside the input class I have a laravel directive @error('email') is-invalid @enderror this will repeat “is-invalid” clas s when the form field is empty. what I want to achieve is switching between " is-invalid " and “is-valid” classes the first one if the form field is empty and second one if the form field is filled with respecting the rules
Here is my code :
class ContactForm extends Component
{
public $email;
protected $rules = [
'email' => 'required|email',
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function saveContact()
{
$validatedData = $this->validate();
Contact::create($validatedData);
}
}
<form wire:submit.prevent="ContactForm">
@csrf
<fieldset>
<label for="email" class="form-label">Email Address</label>
<input type="email" wire:model="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}">
@error('email')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
</fieldset>
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
</form>