[develop]:+ Form example including rules and messages

src/Magewire/Form.php

@@ -0,0 +1,47 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Willem Poortman 2021-present. All rights reserved.
+ *
+ * Please read the README and LICENSE files for more
+ * details on copyrights and license information.
+ */
+
+namespace Magewirephp\MagewireExamples\Magewire;
+
+class Form extends \Magewirephp\Magewire\Component\Form
+{
+    // Nested properties.
+    public $customer = [
+        'credentials' => [
+            'firstname' => '',
+            'lastname'  => '',
+            'email'     => '',
+        ]
+    ];
+
+    // Rules for nested properties.
+    protected $rules = [
+        'customer.credentials.firstname' => 'required|min:2',
+        'customer.credentials.lastname'  => 'required|min:2',
+        'customer.credentials.email'     => 'required|email',
+    ];
+
+    // :attribute & :value are available within each message.
+    protected $messages = [
+        'customer.credentials.firstname:required'  => 'Your firstname is required',
+        'customer.credentials.firstname:min'       => 'Your firstname minimum is 2',
+
+        'customer.credentials.lastname:required'  => 'Your lastname is required',
+        'customer.credentials.lastname:min'       => 'Your lastname minimum is 2',
+
+        'customer.credentials.email:required' => 'Your email is required',
+        'customer.credentials.email:email'    => 'Your email is not valid email',
+    ];
+
+    public function save()
+    {
+        $this->validate();
+        // Will only dispatch when all customer credentials are valid.
+        $this->dispatchSuccessMessage('Validation success!');
+    }
+}

src/view/frontend/layout/magewire_examples_index.xml

@@ -53,11 +53,18 @@
                 <block name="magewire.reacticon">
                     <arguments>
                         <argument name="magewire" xsi:type="object">
-
                             \Magewirephp\MagewireExamples\Magewire\Reacticon
                         </argument>
                     </arguments>
                 </block>
+
+                <block name="magewire.form">
+                    <arguments>
+                        <argument name="magewire" xsi:type="object">
+                            \Magewirephp\MagewireExamples\Magewire\Form
+                        </argument>
+                    </arguments>
+                </block>
             </container>
         </referenceContainer>
     </body>

src/view/frontend/templates/magewire/features/wire-ignore.phtml

@@ -9,7 +9,7 @@
 /** @var \Magewirephp\MagewireExamples\Magewire\Features\WireIgnore $magewire */
 $magewire = $block->getMagewire();
 ?>
-<div id="skip-render" class="space-y-4">
+<div id="wire-ignore" class="space-y-4">
     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
         <?= __('Wire Ignore') ?>
     </h2>

src/view/frontend/templates/magewire/form.phtml

@@ -0,0 +1,48 @@
+<?php declare(strict_types=1);
+/**
+ * Copyright © Willem Poortman 2021-present. All rights reserved.
+ *
+ * Please read the README and LICENSE files for more
+ * details on copyrights and license information.
+ */
+
+/** @var \Magewirephp\MagewireExamples\Magewire\Form $magewire */
+$magewire = $block->getMagewire();
+?>
+<div id="form" class="pb-72">
+    <h2 class="text-xl font-bold mb-3 pb-2 border-b">
+        <?= __('Form') ?>
+    </h2>
+
+    <form wire:submit.prevent="save">
+        <div class="flex flex-col mb-6 gap-4">
+            <input type="text"
+                   class="form-input flex-grow disabled:opacity-50"
+                   placeholder="<?= __('Firstname') ?>"
+                   wire:model.defer="customer.credentials.firstname"/>
+            <?php if ($magewire->hasError('customer.credentials.firstname')): ?>
+                <span class="text-red-800"><?= $magewire->getError('customer.credentials.firstname') ?></span>
+            <?php endif ?>
+
+            <input type="text"
+                   class="form-input flex-grow disabled:opacity-50"
+                   placeholder="<?= __('Lastname') ?>"
+                   wire:model.defer="customer.credentials.lastname"/>
+            <?php if ($magewire->hasError('customer.credentials.lastname')): ?>
+                <span class="text-red-800"><?= $magewire->getError('customer.credentials.lastname') ?></span>
+            <?php endif ?>
+
+            <input type="text"
+                   class="form-input flex-grow disabled:opacity-50"
+                   placeholder="<?= __('Email') ?>"
+                   wire:model.defer="customer.credentials.email"/>
+            <?php if ($magewire->hasError('customer.credentials.email')): ?>
+                <span class="text-red-800"><?= $magewire->getError('customer.credentials.email') ?></span>
+            <?php endif ?>
+        </div>
+
+        <button type="submit" class="btn btn-primary text-center float-right">
+            <?= __('Validate') ?>
+        </button>
+    </form>
+</div>