Активация стандартных всплывающих подсказок

после изменения значения с помощью JavaScript

Проблема заключается в том, что когда изменяется значение input с помощью JavaScript, всплывающая подсказка, привязанная к атрибуту minlength, не будет появляться. Это происходит из-за того, что браузер не видит изменение значения input, поэтому подсказка не отображается.

Можно явно вызвать событие "input" после установки значения input. Это заставит браузер обновить визуальное состояние input и всплывающая подсказка появится.

let input = document.getElementById("tel-number");
input.value = "8";

input.dispatchEvent(new Event('input'));

А таким способом не вариант сделать, если я правильно понял, что число 8 это код страны

let input = document.getElementById("tel-number");
let code = document.querySelector("span");
let btn = document.querySelector("input[type='submit']");
code.textContent = "8";

label {
  position: relative;
}
span {
  position: absolute;
  top: 1px;
  left: 5px;
  color: green;
}
input[type="tel"] {
  padding-left: 15px;
}

<form>
  <label class="input-wrapper">
    <input type="tel" id="tel-number" name="tel-number" minlength="11" required>
    <span></span>
  </label>
  <input type="submit">
</form>

За активацию браузерных подсказок отвечает атрибут validity и набор свойств (одно из них — tooShort — принимает значение true, если количество символов в поле input меньше, чем указано в minlength). Все свойства являются readonly, а значит изменить их значение с помощью JS нельзя. При этом они учитывают только изменения, которые внёс пользователь. Если же изменить значение с помощью скрипта, то все свойства примут значение false.

В проекте я использую EventListener, из-за чего dispatchEvent, предложенный в одном из ответов, в моём случае не подошёл (начинается бесконечная рекурсия). Поэтому я использовал метод setCustomValidity, который позволяет установить собственную валидацию с заданным сообщением:

function inputHandler() {
  this.setCustomValidity("");
  if (this.validationMessage) {
      this.setCustomValidity(this.validationMessage);
  };
  
  if(this.value.charAt(0) != "8") {
      this.value = "8" + this.value;
  }
}

function loadHandler() {
    let input = document.getElementById("tel-number");

    input.setCustomValidity(input.validationMessage);
    input.value = "8";
    input.addEventListener("input", inputHandler);
}

window.addEventListener("DOMContentLoaded", loadHandler);

<form>
  <input type="tel" id="tel-number" name="tel-number" minlength="11" required>
  <input type="submit">
</form>