Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature Request] Form component #369

Open
notramo opened this issue Apr 29, 2023 · 5 comments · May be fixed by #428
Open

[Feature Request] Form component #369

notramo opened this issue Apr 29, 2023 · 5 comments · May be fixed by #428
Labels
enhancement New feature or request

Comments

@notramo
Copy link

notramo commented Apr 29, 2023 •
edited
Loading

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 BeeMargarida added enhancement New feature or request awaiting Feature/addition that is being considered by the maintainers labels May 13, 2023
@BeeMargarida
Copy link
Member

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
Copy link
Author

notramo commented May 13, 2023 •
edited
Loading

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

@BeeMargarida
Copy link
Member

BeeMargarida commented May 13, 2023 •
edited
Loading

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
Copy link
Author

notramo commented May 13, 2023

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
Copy link
Member

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.

@BeeMargarida BeeMargarida removed the awaiting Feature/addition that is being considered by the maintainers label May 13, 2023
@khalibloo khalibloo linked a pull request Aug 10, 2023 that will close this issue
Draft
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
SvelteUI board
Status: No status
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[@svelteui/core] form management khalibloo/svelteui
2 participants
@BeeMargarida @notramo