Prevent computing invalid data

Hi,

What's the best practice to prevent Livewire from computing invalid data?

In my app, there are three fields: component1, component2, sum. Components are just input fields with wire:model.live. Sum is computed property and it's just a sum of components. If user enters a string instead of numeric value into one of components, computed property will throw an exception.

How to prevent that behavior? I know I can just set input to be number but still there are ways a user can pass string to the backend and computed property will throw a 500 error.

One solution I came up with is:

updating() hook - validate value here and use $this->skipRender() if validation fails
updated() hook - if validation failed, reset the value

Or maybe I should just should stick to frontend validation and don't care about it on the backend as long as user don't persist the data into the database?

LaryAI

2 years ago

Level 58

To ensure that Livewire doesn't compute invalid data, you should use a combination of frontend and backend validation. While frontend validation can help prevent most invalid inputs, backend validation is crucial for security and data integrity. Here's a solution that uses Livewire's validation system to handle invalid data gracefully:

use Livewire\Component;
use Illuminate\Validation\ValidationException;

class YourComponent extends Component
{
    public $component1;
    public $component2;
    public $sum;

    // Validation rules
    protected $rules = [
        'component1' => 'nullable|numeric',
        'component2' => 'nullable|numeric',
    ];

    // Computed property for sum
    public function getSumProperty()
    {
        // Only compute the sum if both components are numeric
        if (is_numeric($this->component1) && is_numeric($this->component2)) {
            return $this->component1 + $this->component2;
        }

        return null; // Or you could return 0 or any other default value
    }

    // This method is called when any property is updated
    public function updated($propertyName)
    {
        try {
            // Validate the input
            $this->validateOnly($propertyName);
        } catch (ValidationException $e) {
            // Reset the invalid input to its previous value or to a default value
            $this->{$propertyName} = null; // Or handle the exception as needed
        }
    }

    public function render()
    {
        return view('livewire.your-component');
    }
}

In this solution, we have defined validation rules for component1 and component2 to ensure they are numeric or nullable. The updated method is used to validate the input every time it changes. If the validation fails, a ValidationException is caught, and the invalid input is reset to null or any other default value you prefer.

The getSumProperty method is a computed property that calculates the sum only if both component1 and component2 are numeric. This prevents any exceptions from being thrown due to invalid data.

This approach ensures that your backend is robust against invalid inputs, and it gracefully handles any errors without throwing a 500 error to the user. It's always a good idea to have backend validation even if you have frontend validation in place, as users can bypass frontend validation in various ways.