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){
usernameRef.focus();
}else{
blabla
}
}</script>
<ListInput
type="text"
name="username"
placeholder="Your username"
bind:value={username}
bind:this={usernameRef}
/>
<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?