validate countrycodes, lat, lon fields even when hidden (#109)

diff --git a/src/components/SearchSection.svelte b/src/components/SearchSection.svelte
index d321eb4c3be1ebc52b4f98c9faf151a0b42dc1e8..c78980410e2a45b380c114267bc440abfada3fc4 100644 (file)
--- a/src/components/SearchSection.svelte
+++ b/src/components/SearchSection.svelte
@@ -101,7 +101,8 @@
       <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
       <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
       <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
       <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
       <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
       <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />

-      <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+      <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}"
+                                                    pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />

       <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
       <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
     </UrlSubmitForm>
       <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
       <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
     </UrlSubmitForm>


@@ -132,7 +133,8 @@
       <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
       <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
       <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
       <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
       <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
       <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />

-      <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+      <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}"
+                                              pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />

       <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
       <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
     </UrlSubmitForm>
       <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
       <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
     </UrlSubmitForm>


@@ -194,8 +196,9 @@
     <li>
       <label for="option_ccode">Country Codes</label>
       <input type="text" placeholder="e.g. de,gb" class="form-control form-control-sm d-inline w-auto api-param-setting"
     <li>
       <label for="option_ccode">Country Codes</label>
       <input type="text" placeholder="e.g. de,gb" class="form-control form-control-sm d-inline w-auto api-param-setting"

-             data-api-param="countrycodes" id="option_ccode" size="15" pattern="[a-zA-Z]{2}(,[a-zA-Z]{2})*"
+             data-api-param="countrycodes" id="option_ccode" size="15"

              value="{api_request_params.countrycodes || ''}"
              value="{api_request_params.countrycodes || ''}"

+             pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$"

              on:change={set_api_param}>
     </li>
   </ul>
              on:change={set_api_param}>
     </li>
   </ul>

diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index d996f440d2faca35b6f81dc20b75316e652cb379..aca422d786bdc1510fe8fb351eea3871410fb22f 100644 (file)
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -44,6 +44,7 @@
            type="text"
            class="form-control form-control-sm"
            placeholder="latitude"
            type="text"
            class="form-control form-control-sm"
            placeholder="latitude"

+           pattern="^-?\d+(\.\d+)?$"

            bind:value={lat}
            on:change={maybeSplitLatitude} />
   </div>
            bind:value={lat}
            on:change={maybeSplitLatitude} />
   </div>


@@ -60,6 +61,7 @@
            type="text"
            class="form-control form-control-sm"
            placeholder="longitude"
            type="text"
            class="form-control form-control-sm"
            placeholder="longitude"

+           pattern="^-?\d+(\.\d+)?$"

            bind:value={lon} />
   </div>
   <div class="form-group">
            bind:value={lon} />
   </div>
   <div class="form-group">

diff --git a/src/components/UrlSubmitForm.svelte b/src/components/UrlSubmitForm.svelte
index 019fa8c9f007b1932bc3ac8d42e365a75d150e8c..975e79fc2fa61780e367acbecd1e5516bffc2a9a 100644 (file)
--- a/src/components/UrlSubmitForm.svelte
+++ b/src/components/UrlSubmitForm.svelte
@@ -17,8 +17,32 @@
 
     return params;
   }
 
     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.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="">
+<form on:submit|preventDefault={handle_submit} class="form-inline" role="search" accept-charset="UTF-8" action="">

   <slot></slot>
 </form>
   <slot></slot>
 </form>