Display meaningful HTML5 validation error message

We need the new array syntax and I assume, translation. The message needs a period because it's a sentence.

The last patch applied successfully on 9.2 and it works fine
Before patch

After patch

Kind of incredibly to me, this patch still applies in 9.5.x.

Before:

After:

This is essentially just a string change (well, addition). I'm going to mark it as RTBC because I think it's uncontroversial.

I do wonder if it'd be worth giving the example "https" instead of "http" now in 2022, but we'd need to change the field help text as well, and this patch still fixes what is otherwise a confusing error message, so that could be a follow-up.

Updating issue summary with new screenshots.

The patch is being tested against an outdated version of Drupal. I am re-uploading the patch so it will test with 9.5.x

Applied patch #20 on 9.5.x and it working fine.
Attaching screenshot for reference.

After Patch;

@Abhijith S, the patch in #20 is the same as in #4, updated screenshots were added in #19. There was not need to do the work to make another set of screenshot, they are adding noise to the issue. Therefor, credit has been removed per How is credit granted for Drupal core issues.

1. +++ b/core/modules/link/src/Plugin/Field/FieldWidget/LinkWidget.php
   @@ -164,6 +164,10 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
   +    // Defines a validation error message to be used in HTML5. It cannot use "%"
   +    // placeholder because the markup is output in the popup.
   +    $html5_validation_error = t('Enter a full URL, such as "@example".', ['@example' => 'http://example.com']);
   

   $this->t()

2. +++ b/core/modules/link/src/Plugin/Field/FieldWidget/LinkWidget.php
   @@ -176,6 +180,10 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
   +      '#attributes' => [
   +        // Displays a meaningful HTML5 validation error message.
   +        'oninvalid' => "setCustomValidity('" . $html5_validation_error . "')",
   +      ],
   

   This is super tricky. Using a translated string here means we're going to translate the string right away - but also we need to think about what a translator might put into the string and if it will break it. For example what happens if the translation contains a single '.

   Plus there is no test coverage.

3. +++ b/core/modules/link/src/Plugin/Field/FieldWidget/LinkWidget.php
   @@ -164,6 +164,10 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen
   +    // Defines a validation error message to be used in HTML5. It cannot use "%"
   +    // placeholder because the markup is output in the popup.
   +    $html5_validation_error = t('Enter a full URL, such as "@example".', ['@example' => 'http://example.com']);
   

   In the issue summary it says this is only added for links that support external links but that does not appear to be true.

I have attached the patch and addressed the #24
Please review it

#24.2 and #24.3 are not addressed.

Patch #20 tested and applied successfully on Drupal 9.5.x. This patch works when url field is empty. Images attached for reference

re: needs work
- overall, summary should be updated to include both internal and external. This phase should be tied to the field instance in use. #2828556: Display meaningful error messages according to the link type is meant to have those messages. [see: link-error_messages_by_link_type-2828556-30.patch ]
- js in patch is using direct oninvalid attribute.
scope too narrow, see below.

#24.2 and #24.3 are not addressed.

A behavior for Drupal js seem like a better way to get this connected thru all form items. certainly Drupal.t() and plural can be handled there.
The scope is looking at Link, but is really this is where this new library should be able to continue to connect around form items that have 'required_error' to have a data attribute added into the form item render and use those strings for this level of (pre-submit) javascipt messaging to work more ideally.

#1797438: HTML5 validation is preventing form submit and not fully accessible was committed to Drupal Core last week. The resulting change allows for HTML5 validation to be disabled. The option to disable will be available in Drupal 11.4. Disabling will become the default in Drupal 12 and will no longer be optional in Drupal 13. See the change record for information about how to disable validation.

Given that, this issue doesn't serve as much of a purpose anymore. I'm going to close it as being outdated. If you disagree, then feel free to re-open it. But any argument in favor of making a change is going to need justification versus simply switching off HTML5 validation.