Enable soft-required validation in the form designer

docs/manual/forms/basics.rst

@@ -142,7 +142,7 @@ stap.
 
 In deze sectie kunt u velden (ook wel componenten genoemd) naar de formulier
 stap slepen en configureren. Kijk voor alle mogelijkheden naar het overzicht van
-:ref:`formulier velden <manual_form_fields>` en naar de
+:ref:`formuliervelden <manual_form_fields>` en naar de
 :ref:`voorbeelden <manual_examples>`.
 
 Bevestiging

docs/manual/forms/form_fields.rst

@@ -108,7 +108,7 @@ Validatie
 ---------
 
 * **Verplicht**: Indien aangevinkt dan is dit veld verplicht voor de 
-  eindgebruiker.
+  eindgebruiker. Sommige velden ondersteunen :ref:`niet-blokkerende verplichting <manual_forms_soft_required_fields>`.
 
 * **Plugin**: U kunt gebruik maken van een externe plugin om een veld te 
   valideren. De waarde van het veld wordt naar de plugin gestuurd en 

docs/manual/forms/index.rst

@@ -11,6 +11,7 @@ De kern van Open Formulieren is uiteraard het beheren van formulieren.
    variables
    form_fields
    logic
+   soft_required_fields
    logic_dmn
    translations
    registrator

docs/manual/forms/soft_required_fields.rst

@@ -0,0 +1,56 @@
+.. _manual_forms_soft_required_fields:
+
+=================================================
+Formuliervelden met niet-blokkerende verplichting
+=================================================
+
+Sommige velden laten toe om ze als "aangeraden" te markeren. In deze configuratie wordt
+de gebruiker er van bewust gemaakt dat ze velden onbedoeld leeg laten, maar het blokkeert
+ze niet om het formulier in te zenden.
+
+.. note:: De meeste formuliervelden ondersteunen een
+   :ref:`validatie-optie <manual_form_fields_validation>` om het veld verplicht te
+   maken. Deze kan echter soms (om juridische redenen) niet gebruikt worden omdat een
+   gebruiker de aanvraag móet kunnen insturen en de organisatie verplicht is om
+   deze te beoordelen. Het is dan netjes om de gebruiker te kunnen wijzen op eventuele
+   kosten en gevolgen van het niet aanleveren van alle uitgevraagde gegevens.
+
+Formulierconfiguratie
+=====================
+
+.. note:: deze documentatie gaat ervan uit dat je bekend met de basis van
+   :ref:`formulieren beheren <manual_forms_basics>`.
+
+Het is belangrijk dat je in de betreffende formulierstap(pen) een component toevoegt
+die de foutmeldingen weergeeft, anders krijgt de gebruiker geen feedback van eventuele
+ontbrekende gegevens.
+
+Voor elke relevante formulierstap:
+
+1. Sleep zoals je gewend bent de velden uit het menu aan de linkerkant, en stel de
+   relevante configuraties in.
+2. In het instellingenscherm, klik op de "Validatie"-tab.
+3. Schakel vervolgens het selectievakje "Aangeraden (niet-blokkerend verplicht)" in.
+   Indien je deze niet kan aanvinken, controleer dan dat de optie "Verplicht" uitgevinkt
+   is - een veld kan namelijk niet tegelijk blokkerend en niet-blokkerend verplicht zijn.
+4. Sla de veldinstellingen op.
+5. Herhaal stap 1 tot en met 4 voor alle benodigde velden.
+6. Klik in het menu aan de linkerkant de categorie "Opmaak" open.
+7. Sleep het component "Foutmeldingen aangeraden velden" in de formulierstap.
+
+    * De inhoud zal enkel getoond worden als er "aangeraden velden" een lege waarde
+      hebben.
+    * Je kan het bericht voor de gebruiker naar wens instellen. Hierin kan je de
+      sjabloonvariabele ``{{ missingFields }}`` gebruiken die getoond wordt als lijst
+      van veld-labels met ontbrekende waarde.
+    * Andere sjabloonvariabelen of -uitdrukkingen kunnen niet gebruikt worden.
+    * Je kan hier ook vertalingen toepassen.
+
+Ondersteunde velden
+===================
+
+De velden die "Aangeraden (niet-blokkerend verplicht)"-validatie ondersteunen zijn:
+
+* Bestandsupload
+
+Neem contact op indien je deze functionaliteit ook bij andere veldsoorten wenst.

package.json

@@ -30,7 +30,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "@open-formulieren/design-tokens": "^0.53.0",
-    "@open-formulieren/formio-builder": "^0.30.0",
+    "@open-formulieren/formio-builder": "^0.31.0",
     "@open-formulieren/leaflet-tools": "^1.0.0",
     "@open-formulieren/monaco-json-editor": "^0.2.0",
     "@rjsf/core": "^4.2.1",

src/openforms/forms/models/form_definition.py

@@ -141,6 +141,8 @@ def used_in(self) -> models.QuerySet:
         to be used in bulk Form Definition querysets, you should use prefetch queries
         for that.
         """
+        if not self.pk:
+            return Form.objects.none()
         return (
             Form.objects.filter(
                 _is_deleted=False,

src/openforms/forms/tests/test_models.py

@@ -435,6 +435,14 @@ def test_num_components_calculated_on_save(self):
 
         self.assertEqual(fd._num_components, 2)
 
+    def test_used_in_for_unsaved_fds(self):
+        FormFactory.create(generate_minimal_setup=False)
+        fd = FormDefinitionFactory.build()
+
+        used_in_num = fd.used_in.count()
+
+        self.assertEqual(used_in_num, 0)
+
 
 class FormStepTestCase(TestCase):
     def test_str(self):

src/openforms/js/compiled-lang/en.json

@@ -929,6 +929,12 @@
       "value": "The text that will be displayed in the form step to save the current information. Leave blank to get value from global configuration."
     }
   ],
+  "8M403q": [
+    {
+      "type": 0,
+      "value": "Soft required fields should be filled out, but empty values don't block the users' progress. Sometimes this is needed for legal reasons. A component cannot be hard and soft required at the same time."
+    }
+  ],
   "8NbOpb": [
     {
       "type": 0,
@@ -2739,6 +2745,12 @@
       "value": "Select existing form definition"
     }
   ],
+  "QL4SGQ": [
+    {
+      "type": 0,
+      "value": "Soft required"
+    }
+  ],
   "QLTh2N": [
     {
       "type": 0,
@@ -2757,12 +2769,6 @@
       "value": "Whether the user is allowed to submit this form or not, and whether the overview page should be shown if they are not."
     }
   ],
-  "QXsAuR": [
-    {
-      "type": 0,
-      "value": "Product to fetch prices for"
-    }
-  ],
   "QaPqxz": [
     {
       "type": 0,
@@ -5729,12 +5735,6 @@
       "value": "Do not display the configured label and top line as the header in the fieldset."
     }
   ],
-  "uuKVtO": [
-    {
-      "type": 0,
-      "value": "Product"
-    }
-  ],
   "vAZDY4": [
     {
       "type": 0,

src/openforms/js/compiled-lang/nl.json

@@ -933,6 +933,12 @@
       "value": "De tekst op de knop om de gegevens van de huidige stap op te slaan en het formulier te onderbreken. Laat dit veld leeg om de standaardinstelling te gebruiken."
     }
   ],
+  "8M403q": [
+    {
+      "type": 0,
+      "value": "Aangeraden velden moeten in principe ingevuld worden, maar ontbrekende waarden blokkeren de voortgang niet. Dit is soms nodig voor juridische redenen. Een component kan niet tegelijk verplicht en aangeraden zijn."
+    }
+  ],
   "8NbOpb": [
     {
       "type": 0,
@@ -2756,6 +2762,12 @@
       "value": "Selecteer een bestaande formulierdefinitie"
     }
   ],
+  "QL4SGQ": [
+    {
+      "type": 0,
+      "value": "Aangeraden (niet-blokkerend verplicht)"
+    }
+  ],
   "QLTh2N": [
     {
       "type": 0,
@@ -2774,12 +2786,6 @@
       "value": "Geeft aan of de gebruiker het formulier kan inzenden of niet, en of een overzichtspagina getoond wordt indien niet."
     }
   ],
-  "QXsAuR": [
-    {
-      "type": 0,
-      "value": "Product waarvoor prijzen worden opgehaald"
-    }
-  ],
   "QaPqxz": [
     {
       "type": 0,
@@ -5751,12 +5757,6 @@
       "value": "Verberg de koptekst en de lijn boven de veldengroep in het formulier."
     }
   ],
-  "uuKVtO": [
-    {
-      "type": 0,
-      "value": "Product"
-    }
-  ],
   "vAZDY4": [
     {
       "type": 0,

src/openforms/js/components/form/softRequiredErrors.js

@@ -0,0 +1,35 @@
+import {Formio} from 'formiojs';
+
+import {localiseSchema} from './i18n';
+
+const FormioContentField = Formio.Components.components.content;
+
+const Component = Formio.Components.components.component;
+
+class SoftRequiredErrors extends FormioContentField {
+  static schema(...extend) {
+    const schema = Component.schema(
+      {
+        type: 'softRequiredErrors',
+        key: 'softRequiredErrors',
+        label: '', // not displayed anyway
+        input: false,
+        html: undefined, // use default defined in formio-builder
+      },
+      ...extend
+    );
+    return localiseSchema(schema);
+  }
+
+  static get builderInfo() {
+    return {
+      title: 'Soft required errors',
+      icon: 'triangle-exclamation',
+      group: 'custom_layout',
+      weight: 900,
+      schema: this.schema(),
+    };
+  }
+}
+
+export default SoftRequiredErrors;

src/openforms/js/components/formio_builder/builder.js

@@ -70,6 +70,7 @@ const getBuilderOptions = () => {
           content: true,
           fieldset: true,
           columns: true,
+          softRequiredErrors: true,
         },
       },
       custom_preset: {

src/openforms/js/formio_module.js

@@ -26,6 +26,7 @@ import RadioField from './components/form/radio';
 import SelectField from './components/form/select';
 import SelectBoxesField from './components/form/selectBoxes';
 import SignatureField from './components/form/signature';
+import SoftRequiredErrors from './components/form/softRequiredErrors';
 import TextArea from './components/form/textarea';
 import TextField from './components/form/textfield';
 import TimeField from './components/form/time';
@@ -64,6 +65,7 @@ const FormIOModule = {
     editgrid: EditGrid,
     datamap: Datamap,
     addressNL: AddressNL,
+    softRequiredErrors: SoftRequiredErrors,
   },
   builders: {
     webform: WebformBuilder,

src/openforms/js/lang/formio/nl.json

@@ -405,5 +405,6 @@
   "Verify": "Bevestigen",
   "You must verify this email address to continue.": "Om door te gaan moet je dit e-mailadres bevestigen.",
   "You must select at least {{minCount}} items.": "Zorg dat dit veld {{minCount}} of meer opties aangevinkt heeft.",
+  "Soft required errors": "Foutmeldingen aangeraden velden",
   "": ""
 }

src/openforms/scss/components/builder/_builder.scss

@@ -67,7 +67,7 @@ div.flatpickr-calendar.open {
   .tab-pane.active {
     min-block-size: 50vh;
 
-    &:has(.formio-component-content) {
+    &:has(.formio-component-content, .formio-component-softRequiredErrors) {
       min-block-size: 0;
     }
   }