report validity workaround for mobile

pass/lang/de/order.json

@@ -41,6 +41,7 @@
   },
   "revocation": {
     "input": {
+      "error": "Dieses Feld ist erforderlich",
       "label": "Ich stimme der Ausführung des Vertrages vor Ablauf der Widerrufsfrist ausdrücklich zu. Ich habe zur Kenntnis genommen, dass das <a href=\"{{revocation_link}}\" target=\"_blank\">Widerrufsrecht</a> mit Beginn der Ausführung des Vertrages erlischt. Stattdessen gewähren wir Ihnen ein freiwilliges <a href=\"{{refundlink}}\" target=\"_blank\">30-tägiges Rückgaberecht</a>."
     }
   },

pass/public/styles/key/checkout-payment.less

@@ -103,6 +103,9 @@
     display: grid;
     gap: 1rem;
     margin: 1rem 0;
+    > div.error {
+      display: none;
+    }
   }
   #paypal-payment-card #paypal-card-form {
     display: grid;

pass/resources/js/checkout_paypal.js

@@ -86,9 +86,14 @@ function get_paypal_checkout_data(funding_source) {
     fundingSource: funding_source,
     onClick: () => {
       let revocation_checkbox = document.getElementById("revocation");
+      console.log(revocation_checkbox);
       if (!revocation_checkbox.checkValidity()) {
-        revocation_checkbox.reportValidity();
+        if (!revocation_checkbox.reportValidity()) {
+          document.querySelector("#revocation-container > div.revocation-required-error").style.display = "block";
+        }
         return;
+      } else {
+        document.querySelector("#revocation-container > div.revocation-required-error").style.display = "none";
       }
     },
     createOrder: () => {

pass/views/templates/revocation.ejs

+<div class="error revocation-required-error"><%= req.t("revocation.input.error", {ns: "order"}) _%></div>
 <div class="input-group checkbox">
   <input type="checkbox" name="revocation" id="revocation" required />
   <label for="revocation"><%- req.t("revocation.input.label", {ns: "order", revocation_link: `${baseDir}/agb#revocation`, refundlink: `${baseDir}/agb#refund`}) _%></label>