Validating ListInput Svelte/Framework7

Dear Members,

I hope you can help me, I am relatively new to svelte and trying it to combine with Framework7.
Now: I want to create a simple form and be able to notify the user, when something is wrong with his data.

So my code is simple, but I cannot get it to work, because I do not know how to proceed.

<script>let username = "";
  let usernameRef;
  function checkUsername(){
    if (!valid){

            placeholder="Your username"

<Button on:click={checkUsername} title="Checkit" />

The usernameRef contains a proxy, and I cannot manage to focus the field if there is an error.
I also got the info in the console to enable <svelte:options accessors /> when trying to access ‘errorMessage’ programmatically, but it seems to me I would have to do this inside the ListItem component?

I also tried with “required” and “validate” attributes on the ListInput. They work when entering the field and bluring it again, but I want to handle the validation programmatically, even when the user did not enter the field.

How can I focus the field, and how can I initiate the validation process programmatically for such a field, just like when focusing and blurring it?