HTMLGeolocationElement: invalidReason property

Value

The empty string ("") if the element does not have an active blocker, or one of the following values (in priority order):

illegal_subframe

The <geolocation> element is nested inside a <fencedframe> element.

Permanent blocker.

unsuccesful_registration

More than three <geolocation> elements have been inserted into the same document.

Temporary blocker.

recently_attached

The <geolocation> element has only recently been attached to the DOM.

Expiring blocker.

intersection_changed

The <geolocation> element is being moved.

Expiring blocker.

intersection_out_of_viewport_or_clipped

The <geolocation> element is rendered outside or partially inside the viewport.

Temporary blocker.

intersection_occluded_or_distorted

The <geolocation> element is rendered completely inside the viewport, but it is obscured in some way, for example rendered behind other content.

Temporary blocker.

style_invalid

The <geolocation> element has some restricted styles applied to it (see Styling restrictions).

Temporary blocker.

These invalid reasons are listed in priority order, from highest to lowest. If multiple blockers are active, the invalidReason value returned will be the value representing the highest-priority active blocker.

Also note that the descriptions above include a "blocker type" for each invalid reason, which is one of the following:

Permanent

The <geolocation> element is permanently invalid until the developer updates the code to stop the blocker occurring.

Temporary

The <geolocation> element is invalid until the blocking condition no longer occurs. After that, the temporary blocker will turn into an expiring blocker.

Expiring

The <geolocation> element is invalid for a short period of time, after which it becomes valid again.

Examples

Basic usage

<geolocation></geolocation>

const geo = document.querySelector("geolocation");
console.log(geo.invalidReason);
// "", provided the `<geolocation>` element is not blocked in some way

Exploring invalid reasons

In this example, we provide a form control to apply different styles to a <geolocation> element that make it invalid. When each set of styles is applied, we report the invalidReason provided by the browser.

HTML

We start by including a <geolocation> element and a <div> element that we will later allow to be rendered on top of the <geolocation> element.

<geolocation>
  Your browser doesn't support the <code>&lt;geolocation&gt;</code> element.
</geolocation>
<div id="cover">Cover element</div>

Next, we provide a <p> element that we will print the invalidReason generated by each set of styles.

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

Finally, we provide a <select> element to enable the user to choose different styling effects that invalidate the <geolocation> element.

<form>
  <label for="invalidate"
    >Choose a way to invalidate the
    <code>&lt;geolocation&gt;</code> element:</label
  >
  <select id="invalidate">
    <option value="">None</option>
    <option value="move-behind">Move behind element</option>
    <option value="move-out">Move outside viewport</option>
    <option value="bad-contrast">Bad contrast</option>
  </select>
</form>

CSS

In our styles, we start off by giving the <geolocation> element a position value of relative so that it can be positioned, and a z-index value of 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;
}

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

Next, we style our #cover <div> with position: absolute and use inset properties to place it to the right of the <geolocation> element. We also give it a z-index value of 2 so that, if our <div> is placed in the same area as the <geolocation> element, the <div> will be placed on top.

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

Now we define three class styles that will be applied to the <geolocation> element when the different <select> choices are selected by the user. .move-behind moves it behind the #cover <div>, .move-out moves it off-screen, and .bad-contrast gives it a bad color contrast. All three of these styles cause the <geolocation> element to become invalid.

.move-behind {
  left: 150px;
}

.move-out {
  right: 250px;
}

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

JavaScript

In our script, we begin by grabbing references to the <geolocation>, <div>, <p>, and <select> elements.

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

Next, we add an input event listener to the <select> element. When a new select value is chosen, we set a class attribute on the <geolocation> element equal to the chosen select value, which applies one of the invalidating class styles. After a 4-second timeout, we set the class back to "", to return the <geolocation> element back to its valid state.

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

Finally, we include code to report the validation status changes that occur when different select values are chosen. We start by setting the <p> text content to include the invalidReason active when the page first loads. We then add a validationstatuschange event listener to the <geolocation> element. Whenever the validation status changes, we check whether the <geolocation> element is valid using HTMLGeolocationElement.isValid, and if so, print a message confirming this to the <p> element text content. If the <geolocation> element is invalid, we print the invalidReason to the <p> element text content.

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

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

Result

See this code running live (also see the full source code). Try choosing the different invalidation options to see which invalidation reasons are reported in each case.

Specifications

Browser compatibility

See also

• <geolocation> element