Streamlining Error Handling in Blade Components

[Jagadish056]

I've found a more efficient and flexible way to handle validation errors within Blade components.

The Problem:

Using the @error directive inside component attributes often results in syntax errors. For example:

<input {{ $attributes->class(
    'form-input ' . @error('name') 'invalid' @enderror
) }}>

This throws an error: syntax error, unexpected token "<".

Proposed Solution:

To address this, I created a helper function called hasValidationError() that checks if a validation error exists for a given field. This function mirrors the behavior of the @error directive.

if (!function_exists('hasValidationError')) {
    /**
     * Check if a validation error exists for a given field.
     *
     * @param string $field
     * @return bool
     */
    function hasValidationError($field)
    {
        $errors = session('errors', app('view')->shared('errors'));

        return $errors && $errors->has($field);
    }
}

Use this helper function within the class method of your Blade component's attributes, like this:

<input {{ $attributes->class([
    'form-input',
    'invalid' => hasValidationError('name')
]) }}>

This approach provides greater flexibility and customization in handling validation errors within Blade components without encountering syntax issues.

Alternative Approach:

If you prefer to stick with the existing $errors variable, you can use it directly within the class method of your attributes like this:

<input {{ $attributes->class(['form-input', 'invalid' => $errors->has('name') ]) }}>

Additional Note:

Even, if you explicitly block the $errors variable by setting it to null (or whatever) within a component (e.g., <x-input :errors="null" />), the hasValidationError() helper function will still work as expected. This makes the helper function more robust and adaptable to different use cases.

References:
e4da1347-1eea-4550-b985-42ac87c09de9 (ChatGPT), InteractsWithViews (Trait), View (Facade)