index.md

title	HTMLGeolocationElement: invalidReason property
short-title	invalidReason
slug	Web/API/HTMLGeolocationElement/invalidReason
page-type	web-api-instance-property
status	experimental
browser-compat	api.HTMLGeolocationElement.invalidReason

{{APIRef("Navigation API")}}{{SeeCompatTable}}

The invalidReason read-only property of the {{domxref("HTMLGeolocationElement")}} interface returns an enumerated value representing the reason why the associated {{htmlelement("geolocation")}} element is invalid (blocked), if that is the case.

When a blocker is active on a <geolocation> element, it is invalid: This means that it is prevented from functioning, either temporarily or permanently, depending on the reason.

You can query the {{domxref("HTMLGeolocationElement.isValid")}} property to check whether the <geolocation> element is valid or not.

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 {{htmlelement("fencedframe")}} element.

    Permanent blocker.

• unsuccessful_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 {{htmlelement("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 {{htmlelement("p")}} element that we will print the invalidReason generated by each set of styles.

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

Finally, we provide a {{htmlelement("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 {{cssxref("position")}} value of relative so that it can be positioned, and a {{cssxref("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 {{glossary("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 {{domxref("HTMLGeolocationElement.validationstatuschange_event", "validationstatuschange")}} event listener to the <geolocation> element. Whenever the validation status changes, we check whether the <geolocation> element is valid using {{domxref("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

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{htmlelement("geolocation")}} element