chore: 🚸 Migliorata validazione dei form

resources/js/Components/Pages/RecordsPage.jsx

@@ -157,7 +157,7 @@ export default class RecordsPage extends Page {
 
                         return fields.map((field, fieldIndex) => (
                           <Cell key={fieldIndex} columnspan={12 / (section.columns ?? 3)}>
-                            <mwc-textfield {...field} id={field.id ?? fieldIndex}
+                            <text-field {...field} id={field.id ?? fieldIndex}
                                         name={field.name ?? field.id ?? fieldIndex}/>
                           </Cell>))
                           .toArray();
@@ -229,7 +229,7 @@ export default class RecordsPage extends Page {
           if (form.isValid()) {
             const data = {};
 
-            form.find('mwc-textfield, mwc-textarea')
+            form.find('text-field, text-area')
               .each((index, field) => {
                 const key = this.saveModelWithSnakeCase ? snakeCase(field.id) : field.id;
                 data[key] = field.value;

resources/js/WebComponents/TextArea.js

@@ -0,0 +1,25 @@
+import {TextArea as MWCTextArea} from '@material/mwc-textarea';
+
+export default class TextArea extends MWCTextArea {
+  get nativeValidationMessage() {
+    return this.formElement.validationMessage;
+  }
+
+  firstUpdated() {
+    if (this.validationMessage) {
+      this._initialValidationMessage = this.validationMessage;
+    }
+    super.firstUpdated();
+  }
+
+  reportValidity() {
+    const isValid = super.reportValidity();
+    // Note(cg): override validationMessage only if no initial message set.
+    if (!this._initialValidationMessage && !isValid) {
+      this.validationMessage = this.nativeValidationMessage;
+    }
+    return isValid;
+  }
+}
+
+window.customElements.define('text-area', TextArea);

resources/js/WebComponents/TextField.js

@@ -0,0 +1,33 @@
+import {TextField as MWCTextField} from '@material/mwc-textfield';
+
+export default class TextField extends MWCTextField {
+  get nativeValidationMessage() {
+    return this.formElement.validationMessage;
+  }
+
+  /**
+   * Fix mwc-textfield when handling validation message
+   * It gets native input validation message when no default validationMessage is set.
+   *
+   * Related issue:
+   * https://github.com/material-components/material-components-web-components/issues/971
+   *
+   */
+  firstUpdated() {
+    if (this.validationMessage) {
+      this._initialValidationMessage = this.validationMessage;
+    }
+    super.firstUpdated();
+  }
+
+  reportValidity() {
+    const isValid = super.reportValidity();
+    // Note(cg): override validationMessage only if no initial message set.
+    if (!this._initialValidationMessage && !isValid) {
+      this.validationMessage = this.nativeValidationMessage;
+    }
+    return isValid;
+  }
+}
+
+window.customElements.define('text-field', TextField);

resources/js/WebComponents/index.js

@@ -1,5 +1,6 @@
 // noinspection JSUnusedGlobalSymbols
 
 export {default as Drawer} from './MaterialDrawer';
+export {default as TextArea} from './TextArea';
+export {default as TextField} from './TextField';
 export {default as TopAppBar} from './TopAppBar';
-

resources/js/app.js

@@ -40,24 +40,3 @@ createInertiaApp({
     m.mount(el, app);
   }
 });
-
-$.fn.isValid = function () {
-  if (this.prop('tagName')
-    .toLowerCase() === 'form') {
-    let isValid: boolean = true;
-
-    this.find('mwc-textfield, mwc-textarea')
-      .each((index: number, field: HTMLInputElement) => {
-        if (!field.checkValidity()) {
-          isValid = false;
-          return false;
-        }
-
-        return true;
-      });
-
-    return isValid;
-  }
-
-  return this[0].checkValidity();
-};

resources/js/utils.js

@@ -1,5 +1,7 @@
 // noinspection JSUnusedGlobalSymbols
 
+import {type Cash} from 'cash-dom/dist/cash';
+
 /**
  * Check if class/object A is the same as or a subclass of class B.
  */
@@ -51,3 +53,22 @@ export async function showSnackbar(message: string, duration: number = 5000, acc
   });
   return reasonPromise;
 }
+
+export function isFormValid(element: Cash | HTMLFontElement) {
+  let form = element;
+
+  if (form instanceof HTMLFormElement) {
+    form = $(form);
+  }
+
+  let isValid: boolean = true;
+
+  form.find('text-field, text-area')
+    .each((index: number, field: HTMLInputElement) => {
+      if (!field.reportValidity()) {
+        isValid = false;
+      }
+    });
+
+  return isValid;
+}