Automatically add a red star to the label when a field is marked as required (#369)

Co-authored-by: Pascal Baljet <[email protected]>

Author: Johan Montenij

config/splade.php

@@ -66,12 +66,13 @@
      * @see https://splade.dev/docs/form-overview
      */
     'blade' => [
-        'component_prefix'           => 'splade',
-        'table_cell_directive'       => 'cell',
-        'escape_validation_messages' => true,
-        'seo_title_directive'        => 'seoTitle',
-        'seo_description_directive'  => 'seoDescription',
-        'seo_keywords_directive'     => 'seoKeywords',
+        'component_prefix'                   => 'splade',
+        'table_cell_directive'               => 'cell',
+        'asterisk_on_required_form_elements' => false,
+        'escape_validation_messages'         => true,
+        'seo_title_directive'                => 'seoTitle',
+        'seo_description_directive'          => 'seoDescription',
+        'seo_keywords_directive'             => 'seoKeywords',
     ],
 
     /**

resources/lang/nl.json

@@ -16,8 +16,9 @@
     "Search": "Zoeken",
     "Select all on this page": "Selecteer alles op deze pagina",
     "Select all results": "Selecteer alle resultaten",
+    "This field is required": "Dit veld is verplicht",
     "of": "van",
     "per page": "per pagina",
     "results": "resultaten",
     "to": "tot"
-}
+}

resources/views/form/label.blade.php

@@ -1 +1,6 @@
-<span class="block mb-1 text-gray-700 font-sans">{{ $label }}</span>
+<span class="block mb-1 text-gray-700 font-sans">
+    {!! $label !!}
+    @if($attributes->has('required') || $attributes->has('data-required'))
+        <span aria-hidden="true" class="text-red-600" title="{{ __('This field is required') }}">*</span>
+    @endif
+</span>

src/FormBuilder/Component.php

@@ -158,6 +158,10 @@ public function required(bool $required = true): self
     {
         if ($required) {
             $this->rules[] = 'required';
+
+            if (config('splade.blade.asterisk_on_required_form_elements', false)) {
+                $this->attributes['data-required'] = true;
+            }
         }
 
         return $this;
@@ -191,6 +195,10 @@ public function rules(...$rules): self
             return explode('|', $item);
         })->flatten()->toArray();
 
+        if (config('splade.blade.asterisk_on_required_form_elements', false) && in_array('required', $this->rules)) {
+            $this->attributes['data-required'] = true;
+        }
+
         return $this;
     }