Using the #[Validate] Attribute in Livewire v3 for Simplified Form Validation

Livewire v3 introduces the #[Validate] attribute, allowing developers to define validation rules directly on component properties, simplifying code and improving maintainability.

Understanding the #[Validate] Attribute

The #[Validate] attribute supports defining validation rules on component properties, often replacing the separate $rules array for clearer and more concise code.

Basic Usage

Let’s start with a simple example:

use Livewire\Component;
use Livewire\Attributes\Validate;

class ContactForm extends Component
{
    #[Validate('required|min:3')]
    public $name = '';
    #[Validate('required|email')]
    public $email = '';
    function save()
    {
        $this->validate();
        // Save logic here...
    }
    function render()
    {
        return view('livewire.contact-form');
    }
}

In this example, the #[Validate] attribute is applied directly to the $name and $email properties, defining their validation rules.

Advanced Techniques

Custom Error Messages

You can specify custom error messages directly within the attribute:

#[Validate('required|min:3', message: 'Please enter your full name')]
public $name = '';

Multiple Rules

For multiple validation rules, an array can be used:

#[Validate(['required', 'string', 'max:255'])]
public $title = '';

Conditional Validation

You can perform conditional validation using closures or rule parameters:

#[Validate(
    rule: 'required_if:has_company,true',
    as: 'company name'
)]
public $company_name = '';

public $has_company = false;

Real‑World Example: Registration Form

A more comprehensive registration form demonstrates the use of #[Validate] on all fields, including a boolean rule for terms acceptance:

use Livewire\Component;
use Livewire\Attributes\Validate;

class RegistrationForm extends Component
{
    #[Validate('required|min:3')]
    public $name = '';
    #[Validate('required|email|unique:users')]
    public $email = '';
    #[Validate('required|min:8')]
    public $password = '';
    #[Validate('required|same:password')]
    public $password_confirmation = '';
    #[Validate('boolean')]
    public $terms_accepted = false;
    function register()
    {
        $validated = $this->validate();
        User::create([
            'name' => $validated['name'],
            'email' => $validated['email'],
            'password' => bcrypt($validated['password']),
        ]);
        session()->flash('message', 'Account created successfully!');
        return $this->redirect('/dashboard');
    }
    function render()
    {
        return view('livewire.registration-form');
    }
}

Performance Considerations

Although the #[Validate] attribute is compiled at runtime, it does not cause a performance penalty compared to using the $rules property. For forms with many fields, benchmarking is recommended to ensure optimal performance.

Conclusion

The #[Validate] feature in the Livewire framework provides a clean and intuitive way to handle form validation directly on properties, enhancing readability and maintainability for simple forms while significantly reducing boilerplate code. However, for complex validation scenarios, developers may still need to use the traditional $rules array or custom rule objects, choosing the tool that best fits the specific application context.