Broken href in link present on page content

[sazk07]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation

What specific section or headline is this issue about?

Validating forms using JavaScript

What information was incorrect, unhelpful, or incomplete?

sub-heading: Extending built-in form validation

paragraph content:

You can try this example in the page at the Live sample demo link. Try submitting an invalid email address, a valid email address that doesn't end in @example.com, and one that does end in @example.com.

The link in "Live sample demo" is broken and redirects to the page itself.

What did you expect to see?

A link that takes the viewer to a page with the example or an iframe, within the page, containing a document with the example, just like the examples above and below the concerned section.

Do you have any supporting links, references, or citations?

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#validating_forms_using_javascript

scroll down to "Extending built-in form validation", last paragraph just before the start of the section "A more detailed example"

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn_web_development/extensions/forms/form_validation
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/form_validation/index.md
• Last commit: 5b20f5f
• Document last modified: 2024-12-19T15:37:45.000Z

[Himanshuch8055]

I’d love to take this on! If you could assign it to me, I’ll make sure to handle this issue with care.

[bsmth]

The problem appears to be with the LiveSampleLink use. I'm not 100% certain, but I think it's because there's no embedlivesample macro on the page, for instance, this works:

{{EmbedLiveSample("extending_built-in_form_validation", "", "200px")}}

You can try this example at the {{LiveSampleLink('extending_built-in_form_validation', 'Live sample demo link')}}.

[caugner]

It looks like this was already broken when it was added in 75d9aae.

I guess the EmbedLiveSample macro call is missing.

[wbamberg]

It looks like this was already broken when it was added in 75d9aae.

I guess the EmbedLiveSample macro call is missing.

This example was added in #36415, and in the discussion for that PR, it's clear that using LiveSampleLink instead of EmbedLiveSample was intentional: EmbedLiveSample doesn't work in Chrome because of iframe sandboxing.

It looks like this was already broken when it was added

Maybe but it seems a bit unlikely that @hamishwillee would not have checked this when reviewing this PR.

Also I saw that in existing (working) LiveSampleLink calls, we now get a scary interstitial when clicking the link (see e.g. the link at the end of https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight#demo):

I know MDN pretty well and was very put off by this page. I wonder how many normal users would click through.

[hamishwillee]

1. Yes, the use of macro is intentional. Embed doesn't work in this case.
2. Yes I tested it and at that time it worked at least locally. It doesn't work locally now (at this point I can't guarantee that I tested it on the live site).
3. The demo page link above is indeed horrible, but that's a separate issue. Perhaps ask @pransh15

@caugner This is a yari bug (not saying the code isn't at fault, but whatever is breaking it occurred after it was submitted)

[Josh-Cena]

@caugner It looks like the general opinion is that this is a platform bug that LiveSampleLink doesn't work as expected. It's also quite jarring that live sample links have this warning, since live samples are authored by MDN and are trustable. Even if you use the same playground infrastructure, it should be handled differently.