svelteuidev / svelteui

SvelteUI Monorepo
https://svelteui.dev
MIT License
1.28k stars 64 forks source link

[Feature Request] `Form` component #369

Open notramo opened 1 year ago

notramo commented 1 year ago

After examining the available form validation libraries, I come to the conclusion that a custom Form component would be the cleanest way of form validation with SvelteUI.

The TextInput field could integrate the on:blur, on:change, on:input event handlers, the bind:value, and the error message using the context API.

I would recommend schema based validation with Zod. For more advanced use cases, a custom validation function could be specified.

<script>
  import { Form, TextInput } from '@svelteuidev/core';
  import * as zod from 'zod';

  const mySchema = z.object({
    username: z.string(),
    password: z.string(),
  };
</script>
<Form schema={mySchema}>
  <TextInput name="username"/>
  <TextInput name="password" type="password"/>
</Form>

Do you want to contribute this feature and create a pull request

Yes

BeeMargarida commented 1 year ago

I'm not sure this is something we want to make, since it's very tied to the schema validation type of validation. I'll leave this open if anyone wants to discuss this, but it's not on the roadmap

notramo commented 1 year ago

@BeeMargarida, what other validations could be used in addition to schema validation?

BeeMargarida commented 1 year ago

You can use other libraries like parsley, a lot of svelte focused ones like svelte-forms-lib (uses yup) or felte, or you can just the Constraint Validation API. Perhaps a hook that's compatible with schema validation is the way to go, if we want to include such feature in this library, but it should allow interoperability with most form validation solutions.

notramo commented 1 year ago

This would replace those form validation solutions with a built-in one. These libraries are just ways of connecting the input fields to the validation logic. If SvelteUI provided the connection, then only the validation logic would be needed. A validation hook could be a viable solution, which would enable developers to use their own validation logic. The Form component would only provide a way to connect the inputs to this validation logic.

BeeMargarida commented 1 year ago

Okay, I'll leave this open for now, I won't add to the roadmap for now since it's not a priority. Meanwhile, if anyone wants to pick this up and make a general solution (not only for zod), I'm all for it.