- Added show js errors to inputs for inline error display

dash8x · dash8x · commit 3c02a20b670e · 2025-06-28T21:59:31.000+05:00
Signed-off-by: Arushad Ahmed &lt;dash-8x@hotmail.com&gt;
diff --git a/resources/views/bootstrap-5/checkbox.blade.php b/resources/views/bootstrap-5/checkbox.blade.php
@@ -29,5 +29,9 @@ class="form-check-label"
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
 
diff --git a/resources/views/bootstrap-5/file.blade.php b/resources/views/bootstrap-5/file.blade.php
@@ -70,4 +70,8 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/bootstrap-5/image.blade.php b/resources/views/bootstrap-5/image.blade.php
@@ -87,4 +87,8 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/bootstrap-5/input.blade.php b/resources/views/bootstrap-5/input.blade.php
@@ -60,4 +60,8 @@ class="{{ $clearBtnClass }}" title="{{ __('Clear') }}">
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name"/>
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/bootstrap-5/js-errors.blade.php b/resources/views/bootstrap-5/js-errors.blade.php
@@ -0,0 +1,3 @@
+<ul {!! $attributes->merge(['class' => 'invalid-feedback ' . $name . '-error']) !!}>
+    {{ $message }}
+</ul>
diff --git a/resources/views/bootstrap-5/map-input.blade.php b/resources/views/bootstrap-5/map-input.blade.php
@@ -78,6 +78,10 @@ class="map-selector-radius"
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
 
 @pushonce(config('forms.scripts_stack'))
diff --git a/resources/views/bootstrap-5/radio.blade.php b/resources/views/bootstrap-5/radio.blade.php
@@ -29,4 +29,8 @@ class="form-check-label"
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/bootstrap-5/select.blade.php b/resources/views/bootstrap-5/select.blade.php
@@ -118,6 +118,10 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
 
 @if($shouldShowSyncField())
diff --git a/resources/views/bootstrap-5/textarea.blade.php b/resources/views/bootstrap-5/textarea.blade.php
@@ -29,6 +29,10 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
 
 @if($wysiwyg)
diff --git a/resources/views/material-admin-26/checkbox.blade.php b/resources/views/material-admin-26/checkbox.blade.php
@@ -33,4 +33,8 @@ class="checkbox__label"
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/material-admin-26/file.blade.php b/resources/views/material-admin-26/file.blade.php
@@ -62,4 +62,8 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/material-admin-26/image.blade.php b/resources/views/material-admin-26/image.blade.php
@@ -86,4 +86,8 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/material-admin-26/input.blade.php b/resources/views/material-admin-26/input.blade.php
@@ -65,4 +65,8 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/material-admin-26/js-errors.blade.php b/resources/views/material-admin-26/js-errors.blade.php
@@ -0,0 +1,3 @@
+<ul {!! $attributes->merge(['class' => 'invalid-feedback ' . $name . '-error']) !!}>
+    {{ $message }}
+</ul>
diff --git a/resources/views/material-admin-26/map-input.blade.php b/resources/views/material-admin-26/map-input.blade.php
@@ -78,6 +78,10 @@ class="map-selector-radius"
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
 
 @pushonce(config('forms.scripts_stack'))
diff --git a/resources/views/material-admin-26/radio.blade.php b/resources/views/material-admin-26/radio.blade.php
@@ -33,4 +33,8 @@ class="radio__label"
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
diff --git a/resources/views/material-admin-26/select.blade.php b/resources/views/material-admin-26/select.blade.php
@@ -1,13 +1,13 @@
-<x-forms::form-group 
-    :inline-input-class="$inlineInputClass" 
-    :inline-label-class="$inlineLabelClass" 
+<x-forms::form-group
+    :inline-input-class="$inlineInputClass"
+    :inline-label-class="$inlineLabelClass"
     :class="$formGroupClass"
-    :wrap="$showLabel" 
-    :label="$label ?: $label()" 
-    :name="$attributes->get('id') ?: $id()" 
-    :framework="$framework" 
-    :inline="$inline" 
-    :required="$required" 
+    :wrap="$showLabel"
+    :label="$label ?: $label()"
+    :name="$attributes->get('id') ?: $id()"
+    :framework="$framework"
+    :inline="$inline"
+    :required="$required"
     :floating="$floating"
 >
     @if((! empty($prepend)) || (! empty($append)))
@@ -135,6 +135,10 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
 
 @if($shouldShowSyncField())
diff --git a/resources/views/material-admin-26/textarea.blade.php b/resources/views/material-admin-26/textarea.blade.php
@@ -30,6 +30,10 @@
     @if($hasErrorAndShow($name))
         <x-forms::errors :framework="$framework" :name="$name" />
     @endif
+
+    @if($showJsErrors)
+        <x-forms::js-errors :framework="$framework" :name="$name" />
+    @endif
 </x-forms::form-group>
 
 @if($wysiwyg)
diff --git a/src/Views/Components/Checkbox.php b/src/Views/Components/Checkbox.php
@@ -30,6 +30,7 @@ public function __construct(
         bool $floating = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string $framework = ''
     ) {
         parent::__construct(
@@ -45,6 +46,7 @@ public function __construct(
             floating: $floating,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
 
diff --git a/src/Views/Components/Date.php b/src/Views/Components/Date.php
@@ -33,6 +33,7 @@ public function __construct(
         bool $floating = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string $framework = ''
     ) {
         parent::__construct(
@@ -50,6 +51,7 @@ public function __construct(
             floating: $floating,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework,
         );
 
diff --git a/src/Views/Components/Datetime.php b/src/Views/Components/Datetime.php
@@ -27,6 +27,7 @@ public function __construct(
         bool $floating = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string $framework = ''
     ) {
         parent::__construct(
@@ -48,6 +49,7 @@ public function __construct(
             floating: $floating,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
 
diff --git a/src/Views/Components/Email.php b/src/Views/Components/Email.php
@@ -23,6 +23,7 @@ public function __construct(
         bool $floating = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string $framework = ''
     ) {
         parent::__construct(
@@ -40,6 +41,7 @@ public function __construct(
             floating: $floating,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
     }
diff --git a/src/Views/Components/File.php b/src/Views/Components/File.php
@@ -55,6 +55,7 @@ public function __construct(
         bool $inline = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string $framework = ''
     ) {
         $this->showHint = $showHint;
@@ -79,6 +80,7 @@ public function __construct(
             floating: false,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
 
diff --git a/src/Views/Components/FileUpload.php b/src/Views/Components/FileUpload.php
@@ -33,6 +33,7 @@ public function __construct(
         bool              $inline = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string            $framework = ''
     )
     {
@@ -61,6 +62,7 @@ public function __construct(
             inline: $inline,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
     }
diff --git a/src/Views/Components/Hidden.php b/src/Views/Components/Hidden.php
@@ -19,6 +19,7 @@ public function __construct(
         bool $required = false,
         bool $inline = false,
         bool $floating = false,
+        bool $showJsErrors = false,
         string $framework = ''
     ) {
         parent::__construct(
@@ -32,6 +33,7 @@ public function __construct(
             required:$required,
             inline: $inline,
             floating: $floating,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
     }
diff --git a/src/Views/Components/Image.php b/src/Views/Components/Image.php
@@ -45,6 +45,7 @@ public function __construct(
         bool              $inline = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string            $framework = ''
     )
     {
@@ -71,6 +72,7 @@ public function __construct(
             inline: $inline,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
 
diff --git a/src/Views/Components/ImageUpload.php b/src/Views/Components/ImageUpload.php
@@ -39,6 +39,7 @@ public function __construct(
         bool              $inline = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string            $framework = ''
     )
     {
@@ -73,6 +74,7 @@ public function __construct(
             inline: $inline,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
     }
diff --git a/src/Views/Components/Input.php b/src/Views/Components/Input.php
@@ -42,6 +42,7 @@ public function __construct(
         bool   $floating = false,
         public string $inlineLabelClass = '',
         public string $inlineInputClass = '',
+        public bool $showJsErrors = false,
         string $framework = ''
     ) {
         parent::__construct($framework);
diff --git a/src/Views/Components/JsErrors.php b/src/Views/Components/JsErrors.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Javaabu\Forms\Views\Components;
+
+use Illuminate\Support\Str;
+
+class JsErrors extends Component
+{
+    protected string $view = 'js-errors';
+    public string $name;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        string $name = '',
+        string $framework = ''
+    ) {
+        parent::__construct($framework);
+
+        $this->name = static::convertBracketsToDots(Str::before($name, '[]'));
+    }
+}
diff --git a/src/Views/Components/Latitude.php b/src/Views/Components/Latitude.php
@@ -25,6 +25,7 @@ public function __construct(
         bool $floating = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string $framework = ''
     ) {
         parent::__construct(
@@ -42,6 +43,7 @@ public function __construct(
             floating: $floating,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
     }
diff --git a/src/Views/Components/Longitude.php b/src/Views/Components/Longitude.php
@@ -25,6 +25,7 @@ public function __construct(
         bool $floating = false,
         string $inlineLabelClass = '',
         string $inlineInputClass = '',
+        bool $showJsErrors = false,
         string $framework = ''
     ) {
         parent::__construct(
@@ -42,6 +43,7 @@ public function __construct(
             floating: $floating,
             inlineLabelClass: $inlineLabelClass,
             inlineInputClass: $inlineInputClass,
+            showJsErrors: $showJsErrors,
             framework: $framework
         );
     }
diff --git a/src/Views/Components/MapInput.php b/src/Views/Components/MapInput.php
diff --git a/src/Views/Components/Number.php b/src/Views/Components/Number.php
diff --git a/src/Views/Components/Password.php b/src/Views/Components/Password.php
diff --git a/src/Views/Components/Radio.php b/src/Views/Components/Radio.php
diff --git a/src/Views/Components/Select.php b/src/Views/Components/Select.php
diff --git a/src/Views/Components/Select2.php b/src/Views/Components/Select2.php
diff --git a/src/Views/Components/Tel.php b/src/Views/Components/Tel.php
diff --git a/src/Views/Components/Text.php b/src/Views/Components/Text.php
diff --git a/src/Views/Components/Textarea.php b/src/Views/Components/Textarea.php
diff --git a/src/Views/Components/Time.php b/src/Views/Components/Time.php
diff --git a/src/Views/Components/Url.php b/src/Views/Components/Url.php
diff --git a/src/Views/Components/Wysiwyg.php b/src/Views/Components/Wysiwyg.php

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<ul {!! $attributes->merge(['class' => 'invalid-feedback ' . $name . '-error']) !!}>`
	`2`	`+ {{ $message }}`
	`3`	`+</ul>`