From fc983e5ae826cb3f2ac3ecf9a5cf44f468020021 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Radek=20=C5=A0er=C3=BD?= Date: Mon, 6 May 2024 14:12:41 +0200 Subject: [PATCH 1/2] =?UTF-8?q?#1=20=C3=9Aprava=20scrollov=C3=A1n=C3=AD=20?= =?UTF-8?q?po=20validov=C3=A1n=C3=AD=20formul=C3=A1=C5=99e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Po zvalidování nově scrollujeme podle složitější logiky. Pokud není žádný focusovatelný prvek na základě validace (ale validace má nějaké chyby), přesouváme na začátek formuláře. Pokud máme focusovatelný prvek (první chybný input formuláře), pak pokud není typu hidden a zároveň nemá nastaveno globální umístění zprávy, pak do něj přesouváme focus a prohlížeč zajistí scroll. V případě hidden prvků, nebo prvků s globální validační zprávou scrollujeme přímo na placeholder (nebo formulář). --- src/assets/pdForms.js | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/assets/pdForms.js b/src/assets/pdForms.js index 0038dab..166a99d 100644 --- a/src/assets/pdForms.js +++ b/src/assets/pdForms.js @@ -594,6 +594,31 @@ } + /** + * Scroll into first error after validation. + */ + pdForms.afterValidationScroll = function (form, firstErrorElem) { + if (! firstErrorElem) { + form.scrollIntoView(); + return; + } + + var placeholder = pdForms.getMessagePlaceholder(firstErrorElem) + + if (placeholder.isGlobal || firstErrorElem.type === 'hidden') { + (placeholder.elem ?? form).scrollIntoView() + + firstErrorElem.focus({ + preventScroll: true + }); + + return; + } + + firstErrorElem.focus() + } + + /** * Optional rules are defined using "optional" property in "arg". We have to convert arg into Nette format before * validating. This means removing all properties but data from arg and storing them elsewhere. @@ -644,8 +669,8 @@ } } - if (focusElem) { - focusElem.focus(); + if (errors.length) { + pdForms.afterValidationScroll(form, focusElem); } }; From a783bcea954f8f92e7bcf23ffe35b3e2d7d35292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Radek=20=C5=A0er=C3=BD?= Date: Mon, 6 May 2024 14:22:14 +0200 Subject: [PATCH 2/2] Version bump --- package.json | 2 +- src/assets/pdForms.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index faee1d5..e091b86 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "pd-forms", "title": "pdForms", "description": "Customization of netteForms for use in PeckaDesign.", - "version": "4.0.1", + "version": "4.1.0", "author": "PeckaDesign, s.r.o ", "contributors": [ "Radek Šerý ", diff --git a/src/assets/pdForms.js b/src/assets/pdForms.js index 166a99d..b0fb3f0 100644 --- a/src/assets/pdForms.js +++ b/src/assets/pdForms.js @@ -1,7 +1,7 @@ /** * @name pdForms * @author Radek Šerý - * @version 4.0.1 + * @version 4.1.0 * * Features: * - live validation