Smarter way to let a div act as a form input type submit on click?

[lkj4]

I could get this somehow working with giving the form id='my-form' with following markup as the clickable div:

<div on:click={() => document.geltElementById('my-form').submit()} />

But now, it tries to submit immediately on click not letting the browser do some validations (e.g., are all required fields filled, is the email address an email, etc.). And the json api response is shown in the browser, so the browser somehow redirects to json response for whatever reason. 😶

Is there any smarter way?

Background: I want to have one consistent button component for all interactions, hence I need a <div />.

[gkatsanos]

If you don't use the submit event on <form /> you won't get native validation, you'll have to do it manually ..
https://svelte.dev/repl/eec1947f282043338e1ca4eedd071ba9?version=3.48.0
in that sense, having the on:submit in <form /> has some advantages.

Not sure what you mean by "consistent button component for all interactions".

[lkj4]

having the on:submit in <form /> has some advantages.

Ok, I've only used this use:enhance from SvelteKit's demo app's form.ts which is adding a form.addEventListener('submit', handle_submit) to the form and tried both with a real <input type='input'>... and as stated above a <div on:click={.... I guess it's the same at the end of the day.

Not sure what you mean by "consistent button component for all interactions".

I want just to have one consistent component/style for clickable ui elements, e.g., links, random divs changing state or input type=submits. For the user they should all follow one design/style language while they differ under the hood depending on the context. I hope it's more clear now. 🙂

[gkatsanos]

You could have one component for your submit button so the UI is always the same, and pass the submit handler method as a prop to it. This way the submit logic can be different on a case by case while the UI remains the same.

[gkatsanos]

@lkj4 I drafted something quickly for you: https://svelte.dev/repl/eec1947f282043338e1ca4eedd071ba9?version=3.48.0
MyButton can have one UI, same everywhere. Submit logic is always on the form element, native validation works.