Laravel Livewire Real Time Validation switching between classes - laravel-8

Question

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" class 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.
Here is my code :
class ContactForm extends Component
{
public $name;
public $email;
protected $rules = [
'name' => 'required|min:6',
'email' => 'required|email',
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function saveContact()
{
$validatedData = $this->validate();
Contact::create($validatedData);
}
}
<form wire:submit.prevent="saveContact">
<input type="text" wire:model="name" class="#error('name') is-invalid #enderror">
#error('name') <span class="error">{{ $message }}</span> #enderror
<input type="text" wire:model="email" class="#error('email') is-invalid #enderror">
#error('email') <span class="error">{{ $message }}</span> #enderror
<button type="submit">Save Contact</button>
</form>

Answer 1

We can use the error bag $errors and check if it has an error with the existing #error blade directive to show the error message.
<form wire:submit.prevent="saveContact">
<input type="text" wire:model="name" class="#if($errors->has('name')) is-invalid #else is-valid #endif">
#error('name') <span class="error">{{ $message }}</span> #enderror
<input type="text" wire:model="email" class="#if($errors->has('email')) is-invalid #else is-valid #endif">
#error('email') <span class="error">{{ $message }}</span> #enderror
<button type="submit">Save Contact</button>
</form>
I have used the has function from the error bag and the usual #if blade directive to achieve this.
Now if there is no error and input is valid, the is-valid class will be added.
Similarly if the validation fails, is-invalid class will be added.

Answer 2

jhones,
You need to address it with javascript. See my answer below.
class ContactForm extends Component
{
public $name;
public $email;
protected $rules = [
'name' => 'required|min:6',
'email' => 'required|email',
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function saveContact()
{
$validatedData = $this->validate();
Contact::create($validatedData);
}
}
<form wire:submit.prevent="saveContact">
<input type="text" wire:model="name" class="#error('name') is-invalid #else is-valid #enderror" id="name-input">
#error('name') <span class="error">{{ $message }}</span> #enderror
<input type="text" wire:model="email" class="#error('email') is-invalid #else is-valid #enderror" id="email-input">
#error('email') <span class="error">{{ $message }}</span> #enderror
<button type="submit">Save Contact</button>
</form>
<!-- javascript here: i use jquery syntaxe here -->
<script>
$(document).ready(function() {
$('#name-input').change(function(){
$(this).removeClass('is-invalid')
});
$('#email-input').change(function(){
$(this).removeClass('is-invalid')
});
})
</script>
Explanation 👇
I modify the HTML as following:
<input type="text" wire:model="name" class="#error('name') is-invalid #else is-valid #enderror" id="name-input">
#error('name') <span class="error">{{ $message }}</span> #enderror
<input type="text" wire:model="email" class="#error('email') is-invalid #else is-valid #enderror" id="email-input">
I add an id to each input to be able to call them in the script later.
Also i add the class "is-valid" if the server didn't return an error msg.
Hope this solution helps you. Let me know

Answer 3

Hi friend you can use ;
<input id="email" class="form-control #if($errors->has('form.email')) is-invalid #else {{ $is_valid }} #endif" name="email" type="email" wire:model.lazy="form.email">
#error('form.email')<label id="email-error" class="error invalid-feedback" for="email" >{{ $message }}</label> #enderror
And class is ;
public function updated($name)
{
$a= $this->validateOnly($name, [
'form.email' => 'required|email',
'form.password' => 'required',
]);
if($a) {
$this->is_valid='is-valid';
}
else {
$this->is_valid='';
}
}