Custom validation messages w. Svelte

Example.svelte

<script lang="ts">
let control: HTMLInputElement
function validate() {
    if (control.validity.valueMissing) {
        control.setCustomValidity('Please provide a date of birth.')
    }
}
<script>
<input
  type="date"
  bind:this="{control}"
  required
  on:invalid="{validate}"
  on:change="{validate}"
  on:input="{validate}"
  title="A required input" />
<style>
  *:required::after {
    font-size: 125%;
    vertical-align: top;
    content: '*';
    color: red;
  }
</style>

Result