HTMLGeolocationElement: invalidReason

Want more browser support for this feature? Tell us why.

invalidReason HTMLGeolocationElement <geolocation>

<geolocation>

HTMLGeolocationElement.isValid <geolocation>

("")

illegal_subframe

<geolocation> <fencedframe>

unsuccesful_registration

3 <geolocation>

recently_attached

<geolocation> DOM

intersection_changed

<geolocation>

intersection_out_of_viewport_or_clipped

<geolocation>

intersection_occluded_or_distorted

<geolocation>

style_invalid

<geolocation>

invalidReason

: <geolocation>
: <geolocation>
: <geolocation>

html

<geolocation></geolocation>

const geo = document.querySelector("geolocation");
console.log(geo.invalidReason);
// "" `<geolocation>`

<geolocation> invalidReason

HTML

<geolocation> <geolocation> <div>

html

<geolocation>
   <code>&lt;geolocation&gt;</code> 
</geolocation>
<div id="cover"></div>

<p> invalidReason

html

<p id="reason"></p>

<select> <geolocation>

html

<form>
  <label for="invalidate"
    ><code>&lt;geolocation&gt;</code> :</label
  >
  <select id="invalidate">
    <option value=""></option>
    <option value="move-behind"></option>
    <option value="move-out"></option>
    <option value="bad-contrast"></option>
  </select>
</form>

CSS

<geolocation> position relative z-index 1

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin-left: 50px;
}

geolocation {
  font-size: small;
}

#cover {
  width: 200px;
  height: 50px;
  color: white;
  background-color: darkblue;
  padding: 10px;
}

css

geolocation {
  position: relative;
  z-index: 1;
}

#cover <div> position: absolute <geolocation> z-index 2 <div> <geolocation> <div>

css

#cover {
  position: absolute;
  top: 72px;
  left: 250px;
  z-index: 2;
}

<select> <geolocation> 3 .move-behind #cover <div> .move-out .bad-contrast 3 <geolocation>

css

.move-behind {
  left: 150px;
}

.move-out {
  right: 250px;
}

.bad-contrast {
  background-color: red;
  color: orange;
}

JavaScript

<geolocation><div><p><select>

const geo = document.querySelector("geolocation");
const coverElem = document.querySelector("#cover");
const reasonElem = document.querySelector("#reason");
const selectElem = document.querySelector("select");

input <select> <geolocation> class 4 class "" <geolocation>

selectElem.addEventListener("input", () => {
  geo.className = selectElem.value;
  setTimeout(() => {
    geo.className = "";
  }, 4000);
});

<p> invalidReason validationstatuschange <geolocation> HTMLGeolocationElement.isValid <geolocation> <p> <geolocation> invalidReason <p>

reasonElem.textContent = `Invalid reason: ${geo.invalidReason}`;

geo.addEventListener("validationstatuschange", () => {
  if (geo.isValid) {
    reasonElem.textContent = `<geolocation> is valid`;
  } else {
    reasonElem.textContent = `Invalid reason: ${geo.invalidReason}`;
  }
});


The HTML Geolocation Element # dom-activationblockersmixin-invalidreason

<geolocation>

MDN

MDN 2026412

GitHub