replace eslint-plugin-svelte3 with eslint-plugin-svelte

[nominatim-ui.git] / src / components / UrlSubmitForm.svelte

diff --git a/src/components/UrlSubmitForm.svelte b/src/components/UrlSubmitForm.svelte
index 019fa8c9f007b1932bc3ac8d42e365a75d150e8c..01f5a57dd6a182b141154e092273d097b1927e0b 100644 (file)
--- a/src/components/UrlSubmitForm.svelte
+++ b/src/components/UrlSubmitForm.svelte
@@ -12,13 +12,48 @@
       if (['checkbox', 'radio'].indexOf(field.type) > -1 && !field.checked) return;
       if (typeof field.value === 'undefined' || field.value === '') return;
 
       if (['checkbox', 'radio'].indexOf(field.type) > -1 && !field.checked) return;
       if (typeof field.value === 'undefined' || field.value === '') return;
 

+      // Default value for /search endpoint
+      if (field.name === 'dedupe' && (field.value === 1 || field.value === '1')) return;
+

       params.set(field.name, field.value);
     });
 
     return params;
   }
       params.set(field.name, field.value);
     });
 
     return params;
   }

+
+  // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+  // doesn't support hidden fields, so we check those in an extra step
+  function validate_field(field) {
+    if (field.type === 'hidden') {
+      if (field.value.length) {
+        if (field.pattern && !field.value.match(field.pattern)) return false;
+      }
+    }
+    return field.checkValidity(); // for hidden field always true
+  }
+
+  function handle_submit(event) {
+    let form = event.target;
+
+    let allow_submit = true;
+
+    Array.prototype.slice.call(form.elements).forEach(function (field) {
+      if (!validate_field(field)) {
+        alert('Invalid input in ' + field.name);
+        allow_submit = false;
+      }
+    });
+
+    if (allow_submit) refresh_page(page, serialize_form(form));
+  }

 </script>
 
 </script>
 

-<form on:submit|preventDefault={(e) => refresh_page(page, serialize_form(e.target))} class="form-inline" role="search" accept-charset="UTF-8" action="">
-  <slot></slot>
+<form on:submit|preventDefault={handle_submit}
+      class="form-inline"
+      role="search"
+      accept-charset="UTF-8"
+      action="">
+  <div class="row g-2">
+    <slot></slot>
+  </div>

 </form>
 </form>