Felte: A form library for Svelte, Solid and React

Last update: May 10, 2022

Felte

Felte: A form library for Svelte, Solid and React

Tests Bundle size NPM Version codecov Follow Felte on Twitter Follow Pablo on Twitter

All Contributors

Felte is a simple to use form library for Svelte, Solid and React. No Field or Form components are needed, just plain stores and actions to build your form however you like. You can see it in action in this CodeSandbox demo!

Features

  • Single action to make your form reactive.
  • Use HTML5 native elements to create your form. (Only the name attribute is necessary).
  • Provides stores and helper functions to handle more complex use cases.
  • No assumptions on your validation strategy. Use any validation library you want or write your own strategy.
  • Handles addition and removal of form controls during runtime.
  • Official solutions for error reporting using reporter packages.
  • Well tested. Currently at 99% code coverage and constantly working on improving test quality.
  • Supports validation with yup, zod, superstruct and vest.
  • Easily extend its functionality.

Simple usage example

Svelte

">
<script>
  import { createForm } from 'felte';

  const { form } = createForm({
    onSubmit: async (values) => {
      /* call to an api */
    },
  });
script>

<form use:form>
  <input type="text" name="email" />
  <input type="password" name="password" />
  <button type="submit">Sign Inbutton>
form>

Solid

); }">
import { createForm } from '@felte/solid';

function Form() {
  const { form } = createForm({
    onSubmit: async (values) => {
      /* call to an api */
    },
  });

  return (
    <form use:form>
      <input type="text" name="email" />
      <input type="password" name="password" />
      <button type="submit">Sign In</button>
    </form>
  );
}

React/Preact

); }">
import { useForm } from '@felte/react';
// if using preact, use `@felte/preact`

function Form() {
  const { form } = useForm({
    onSubmit: async (values) => {
      /* call to an api */
    },
  });

  return (
    <form ref={form}>
      <input type="text" name="email" />
      <input type="password" name="password" />
      <button type="submit">Sign In</button>
    </form>
  );
}

VanillaJS with Web Components

import 'https://unpkg.com/@felte/[email protected]/dist/min/felte-form.js'; const felteForm = document.querySelector('felte-form'); felteForm.configuration = { onSubmit: async (values) => { console.log(values); }, };
">
<script type="module">
  import 'https://unpkg.com/@felte/[email protected]/dist/min/felte-form.js';
  const felteForm = document.querySelector('felte-form');

  felteForm.configuration = {
    onSubmit: async (values) => {
      console.log(values);
    },
  };
script>

<felte-form>
  <form>
    <input type="text" name="email" />
    <input type="password" name="password" />
    <button type="submit">Sign Inbutton>
  form>
felte-form>

This example works without a bundler! Copy its contents to an HTML file and open it on your browser. A more complete example like this, with validation and error reporting, can be found here.

More examples

You can find fully functional examples on the /examples directory of this repository. You should be able to open them on CodeSandbox by replacing github's url to githubbox. E.g. Replace https://github.com/pablo-abc/felte/tree/main/examples/svelte/basic with https://githubbox.com/pablo-abc/felte/tree/main/examples/svelte/basic.

Packages

This repository is a mono-repo containing multiple packages located in the packages directory. Maintained using pnpm and Changesets.

Svelte

We provide two packages that are specific to Svelte:

felte

This is the core package that contains all the basic functionality you need to handle your forms in Svelte. Felte optionally allows you to use error reporters (see them as plugins) to prevent you from needing to find a way to display your errors on your form manually. For this we provide already some reporter packages contained in this same repo.

@felte/reporter-svelte

A reporter package that uses a Svelte component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.

Solid

We provide two packages that are specific to Solid:

@felte/solid

This is the core package that contains all the basic functionality you need to handle your forms in Solid. Same as felte but specifically made for Solid.

@felte/reporter-solid

A reporter package that uses a Solid component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.

React

We provide two packages that are specific to React:

@felte/react

This is the main package that contains the basic functionality you need to handle your forms in React. Same as felte but specifically made for React.

@felte/reporter-react

A reporter packages that uses a React component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers.

Preact

We provide two packages that are specific to Preact:

@felte/preact

This is the main package that contains the basic functionality you need to handle your forms in Preact. Same as felte but specifically made for Preact. The API is the same as @felte/react so you can refer to the same documentation.

@felte/reporter-preact

A reporter packages that uses a Preact component to pass the validation messages for you to display. This provides an API that might feel the most familiar to most developers. The API is the same as @felte/react so you can refer to the same documentation.

VanillaJS

We provide three packages that can be used with only VanillaJS. Two of them using Web Components. These elements do not use the shadow DOM since there is no reason to isolate styles.

@felte/element

This is the main package that contains the basic functionality you need to handle your forms in vanilla JS using a custom element. Similar to felte but specifically made to be used as a custom element. This is the recommended way to handle your forms when using Vanilla JS. Web components are well supported by all major browsers so this should be a safe option unless you need to support legacy browsers.

@felte/reporter-element

A reporter packages that uses a custom element to display validation messages on the DOM. This the recommended way to display your validation messages when using vanilla JS.

@felte/vanilla

This is the main package that contains the basic functionality you need to handle your forms in vanilla JS. Similar to felte and other integrations but with all code related to frameworks removed. This requires a bit more work to use, since you'll be the one in charge of cleaning up subscribers and listeners on it. It's API is basically the same as felte (Svelte's integration) so you can use Svelte's documentation as a reference. This can be used as a starting point to create your own integration/package for other environments. When it comes to vanilla JS we'd recommend using @felte/element using web components.

Validators

The following packages can be used with any of the framework specific felte wrappers:

@felte/validator-yup

A utility package to help you validate your form with Yup.

@felte/validator-zod

A utility package to help you validate your form with Zod.

@felte/validator-superstruct

A utility package to help you validate your form with Superstruct.

@felte/validator-vest

A utility package to help you validate your form with Vest.

Reporters

The following packages can be used with any of the framework specific felte wrappers:

@felte/reporter-tippy

A reporter that uses Tippy.js to display your validation messages without needing any extra work.

@felte/reporter-cvapi

A reporter that uses the browser's constraint validation API to display your validation messages.

@felte/reporter-dom

A reporter that displays the error messages in the DOM, either as a single element or a list of elements.

Contributing

If you want to contribute to this project you may check CONTRIBUTING.md for general guidelines on how to do so.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Pablo Berganza

πŸ’» πŸ“– πŸ€” 🚧 ⚠️

Panagiotis Kapros

πŸ’»

Benjamin Bender

πŸ’» πŸ€” πŸ“–

Abhijit Kar ツ

πŸ› πŸ€”

Hugo MaestΓ‘

πŸ’» πŸ€”

websocket98765

πŸ›

avimar

πŸ“–

Umang Galaiya

πŸ’» πŸ›

Gildas Garcia

πŸ’» πŸ›

basaran

πŸ’» πŸ›

Evyatar

πŸ’»

Julian Schurhammer

πŸ’»

Koichi Kiyokawa

πŸ“–

Ryan Christian

πŸ“–

Ikko Ashimine

πŸ“–

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

Browser support

While further testing would be needed to provide an accurate answer, Felte should work in all evergreen browsers. Polyfills might be needed if you target older browsers such as IE 11 for, at least, Promise.all, Element.closest, URLSearchParams, fetch, CustomEvent and iterators.

GitHub

https://github.com/pablo-abc/felte
Comments
  • 1. Tippy is positioned at the top left corner for `display: none` elements.

    Hey @pablo-abc,

    I'm using a library called Slim Select for Select drop down. It's an advanced select drop down component.

    It hides the original <select> element, which causes the tippy error reporter to show error message at the top left of the screen.

    Screenshot from 2021-04-03 22-20-24

    Is it possible to specify the container, perhaps the label, of a select element as tippy anchor point?

    What should be the best course of action?

    P.S. Also the tippy doesn't show up on directly hovering over the Slim Select, instead I had to hover over the label to see the error.

    Reviewed by abhijit-kar at 2021-04-03 16:49
  • 2. Be able to setup a field level validation schema

    Description

    Hi! It would be nice to set some field level validation.

    Example

    My example is a multi-step form that shares the same

    element. This form asks for phone, name and email.

    HTML
     STEP 1
    <form>
    	<input name='name'>
    	<button type='submit'/>
    </form>
    
     STEP 2
    <form>
    	<input name='phone'>
    	<button type='submit'/>
    </form>
    
    STEP 3
    <form>
    	<input name='email'>
    	<button type='submit'/>
    </form>
    

    I use zod for validating things.

    And I'm using the following schema:

    ### Schema
    const validationSchema = z.object({
    	name: z.string().nonempty(),
    	phone: phoneRegexValidation,
    	email: emailValidation
    })
    
    

    Example's issue

    Every step is required. But I can't use like that. If all of them are required for submitting, I can't use the button as a submit button for controlling my form. And I do have some clear options:

    • Handle only the last button as submittable, control my "steps" out of onSubmit (a bit boilerplatey)
    • Separate into 3 forms, one with each validation (less svelte composable components power)

    There is an option I used on react, using the library react-hook-form

    • dynamically setup my validationSchema when "step" changed
    ### Schema
    const validationSchema = step => z.object({
    	name: z.string().nonempty(),
    	phone: step > 0 ? phoneRegexValidation : optional,
    	email: ztep > 1 ? emailValidation : optional
    })
    
    ### Creating form context
    const { form } = createFormContext({
    		validateSchema: validationSchema(step),
    		onSubmit: values => {
    			if (!isLastStep) step++;
    			else submitToServer(values)
    		}
    	})
    

    But it doesn't seems to work (it could be another issue if I did it right, but that's not the main request here)

    Svelte-action

    I've being trying to create an svelte action to solve that:

    ### Implementation
    export const validate = (
    	node: HTMLInputElement,
    	{ schema }: { schema: z.Schema<any> }
    ) => {
    	const listener = (ev: Event) => {
    		try {
    			schema.parse(node.value)
    		} catch (e) {
    			ev.preventDefault();
    			ev.stopPropagation();
    			ev.stopImmediatePropagation();
    			const error = e as z.ZodError<any>
    			node.setCustomValidity(error.message)
    		}
    	}
    	node.form?.addEventListener('submit', listener)
    
    	return {
    		destroy: () => {
    			node.form?.removeEventListener('submit', listener)
    		}
    	}
    }
    
    ### Usage
    	<input
    		use:validate={nameValidation}
    		name="name"
    	/>
    

    But I'm having no success on that. It isn't preventing form onSubmit from being executed. I don't know how to achieve that outside felte.

    Further comments

    The library I mentioned (react-hook-form) uses a different and less html native for subscribing new fields that can validate at this level.

    RHF validation docs

    I mention them only for bringing examples of libraries that have this kind of field-level API (and are choosing to continue supporting it).

    Another benefit of solving it would be composability problem. A form would not need to know every field that are inside them for validating purposes.

    Reviewed by outerlook at 2021-05-22 14:42
  • 3. Improve extender API

    While the current extender API works, it feels quite hacky. A major thing that should be available is to modify or extend the Felte's configuration which currently relies on modifying the configuration object taking advantage of its mutability.

    Reviewed by pablo-abc at 2021-06-24 19:17
  • 4. Felte not reacting to checkbox's `checked` property

    Hello, first of all, what an amazingly useful library this is! It has made my life SO much better with Svelte when creating forms. I did want to point out a potential bug I have encountered and it goes like this:

    Consider the following:

    <script>
      /* init form stuff */
    
      let checked = false
    </script>
    
    <form use:form>
      <input name="myInput" {checked} />
    
      <button on:click={() => checked = !checked}>Toggle Checkbox Above</button>
    </form>
    

    If I happen to directly click on the checkbox, then the form data is updated as expected, however, if I click the button instead, the form data is not updated.

    Reviewed by jquesada2016 at 2021-08-06 19:16
  • 5. validator-zod async support

    thank you for the great library, I was wondering if there are any examples or if it is actually supported to use promise based schemas with validator-zod?

    Reviewed by basaran at 2021-07-31 23:35
  • 6. [Bug] esm-import of @felte/common fails when using @sveltekit/adapter-node

    Just noticed that there is a bug with @felte/common when building a sveltekit-app using @sveltejs/[email protected]. The problem disappears if I remove the adapter. The problem doesn't exist when doing a named import from f.e. the felte-package itself...

    I'm unsure why this happens as the correct esm-package seems to be built and is referenced in @felte/common's package.json... There seem to be a subtle difference in the rollup-config which makes the adapter unhappy ;)

    vite v2.4.4 building SSR bundle for production...
    βœ“ 74 modules transformed.
    .svelte-kit/output/server/app.js   199.25kb
    
    Run npm run preview to preview your production build locally.
    
    > Using @sveltejs/adapter-node
    > Named export 'getPath' not found. The requested module '@felte/common' is a CommonJS module, which may not support all module.exports as named exports.
    CommonJS modules can always be imported via the default export, for example using:
    
    import pkg from '@felte/common';
    const { getPath } = pkg;
    
    file:///[..]/.svelte-kit/output/server/app.js:2
    import { getPath } from "@felte/common";
             ^^^^^^^
    SyntaxError: Named export 'getPath' not found. The requested module '@felte/common' is a CommonJS module, which may not support all module.exports as named exports.
    CommonJS modules can always be imported via the default export, for example using:
    
    import pkg from '@felte/common';
    const { getPath } = pkg;
    

    Reproduction

    1. npm init [email protected] felte-esm-repro && cd felte-esm-repro && npm i && npm add -D @felte/common @sveltejs/[email protected]
    2. Use the default for every question by hitting enter.
    3. Add the following to your svelte.config.js:
    import node from '@sveltejs/adapter-node';
    
    /** @type {import('@sveltejs/kit').Config} */
    const config = {
    	kit: {
      	adapter: node(),
    		// hydrate the <div id="svelte"> element in src/app.html
    		target: '#svelte'
    	}
    };
    
    export default config;
    
    1. Add the following to src/routes/index.svelte:
    <script>
    	import {Β getPath } from "@felte/common";
    	import Counter from '$lib/Counter.svelte';
    
    	console.log(getPath);
    </script>
    
    1. run npm run build and see it fail.
    Reviewed by benbender at 2021-08-02 12:53
  • 7. [Feature Request] - HMR Store with Local Storage Support

    Hey @pablo-abc,

    I have a feature request, HMR & Local Storage:

    1. With HMR, working with forms in Vite will be crazy fast.
    2. With Local Storage support, the form data will become impervious to data loss in case of page refresh.

    Is it prudent to add HMR Store & Local Storage support to felte's stores?

    I took the following HMR Safe Store code from Vite init.

    // Customized HMR-safe stores
    // Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js
    import { writable } from "svelte/store";
    
    /**
     * @type { Record<string, import('svelte/store').Writable<any>> }
     */
    let stores = {};
    
    /**
     * @template T
     * @param { string } id
     * @param { T } initialValue
     * @returns { import('svelte/store').Writable<T> }
     */
    export function getStore(id, initialValue) {
    	return stores[id] || (stores[id] = writable(initialValue));
    }
    
    // preserve the store across HMR updates
    if (import.meta.hot) {
    	if (import.meta.hot.data.stores) {
    		stores = import.meta.hot.data.stores;
    	}
    	import.meta.hot.accept();
    	import.meta.hot.dispose(() => {
    		import.meta.hot.data.stores = stores;
    	});
    }
    

    P.S. I won't mind a workaround instead.

    Reviewed by abhijit-kar at 2021-04-11 05:49
  • 8. recaptcha

    Hello, would it be consistent with the purpose of felte to add a few extra event listeners like some sort of hooks. I have two different use cases.

    1. Captcha preprocessing
    2. Invoking animations on 3rd party UI libraries.

    captcha preprocessing:

    At the moment, I have attached the recaptcha execution to the onSubmit handler, I also understand I could have done this the other way around, call the recaptcha first and then captchaOnSuccess, call createForm submitButtonHandler. But I figured it would be better to initiate captcha the last in case the token expires or something.

        onSubmit: async (values) => {
            debug("launching recaptcha");
            await recaptcha.execute();
        } /*
           β”‚at this point all validations have passed and it
           β”‚is okay to launch captcha sequence. rest of the
           β”‚data submission will proceed after captcha
           β”‚succeeds and emits onSuccess event.
           */,
    

    createform -> validations -> onSubmit -> execute captha function -> onCaptchaSuccess -> doPost the form inside the callback ----> do server side validation return json -> use setError to update the form.

    This is working fine, but it's a bit of flow jumping. Especially with the second round the form is submitted if there are server side validation errors. You see, for instance if I setError(phoneNumber) because it is invalid on the server side (although it looks valid syntax wise), it disrupts my use of validate and $isSubmitting and $isValid in my validate() function, which I use to display some toasts in an effort to assist the user with a visual cue.

        validate: (values) => {
            if ($isSubmitting && !$isValid) {
                debug("launching custom validation");
                showToast({
                    title: "Incomplete Request",
                    description: "Please check your inputs",
                    type: "warning",
                    showProgress: false,
                });
            }
        } /*
           β”‚this is custom validation logic, we basically
           β”‚use it to show some toast notification as a form
           β”‚of user feedback. All validations actually
           β”‚happen through yup validator.
           */,
    

    when setError() is done on the phoneNumber , it would still launch the toast, and proceed with the server post. I tried setTouch but not sure how that works. I couldn't find a way to reset the errors, the reset function appear to be resetting everything wiping out the user entered form data.

    So, I think it could be helpful, if there were some beforeSubmit, afterSubmit, beforeValidate, aterValidate hooks, and some way to clear error states so it could be possible to trigger some css animations. Otherwise, user might feel like nothing is happening when they press the submit button (that's the reason why I put the toast there like that).

    P.S the closest resetError I could do was:

    for (const [k, v] of Object.entries(values)) {
                setError(k, false);
    }
    

    inside the validate(). But because the validate executes several times during init, and every time the during focus change, it animates the whole form. I was able to work around this by using $isSubmitting however.

    https://user-images.githubusercontent.com/30809170/129354285-c67b6f7d-ad99-4c03-8670-06f0faef2860.mp4

    Reviewed by basaran at 2021-08-13 10:05
  • 9. zod > yup?

    To check the production build size consequence of using yup (with DOM reporter), I built 3 ways:

    Felte with no validation:
    .svelte/output/client/_app/pages/contact.svelte-1a0155d9.js        27.72kb / brotli: 8.37kb
    
    Felte + yup & @felte/validator-yup imported:
    .svelte/output/client/_app/pages/contact.svelte-f4df8f52.js          77.59kb / brotli: 20.89kb
    
    Felte + only @felte/validator-yup imported (to check size):
    .svelte/output/client/_app/pages/contact.svelte-ccc585dd.js         59.51kb / brotli: 16.80kb
    

    Yup adds >200% to Felte's size. After exploring bundlephobia, I found zod.

    • 50% smaller than Yup
    • v3 Zod is tree shakeable
    • contains URL, email, regex, etc too
    z.string().min(5);
    z.string().max(5);
    z.string().length(5);
    z.string().email();
    z.string().url();
    z.string().uuid();
    z.string().regex(regex);
    z.string().nonempty();
    

    What do you think about zod?

    Reviewed by websocket98765 at 2021-03-21 18:15
  • 10. Provide `initialValues` as writable store

    For some form handling, we need to read AND set the initial values as well. Examples:

    • I want to set a field only as touched (and hence process it further on submit) if the field has been touched AND the value has changed, compared to the initial value. Only if both conditions are met, it will be sent to the backend. This is especially important for GraphQL-backends, to only process modified properties and not all the values. Therefore I need to compare the actual value (in the $data-store) to the initial value.
    • When the form is processed at the backend, the new data is returned to the frontend and the form controls are updated accordingly. Now these NEW values must be set as the new initial values. When hitting the Reset-button, these new values must be set in the form. Therefore we need to set the initialValues outside of the form initialization.
    • For certain validation tasks we need to access the former value (=initial value, before changing the content of the input) as well, in order to compare the two values.
    • Certain calculations on the client may change the initial values, e. g. a date changes as some added task lasts longer. When resetting, the new calculated date should be set again as it is the new initial value that will be sent to the backend (instead of recalculating everything after reset).

    In order to be able to do this, providing the initialValues as a store similar to $data and $touched would be a tremendous improvement for us.

    Reviewed by taffit at 2021-12-03 10:19
  • 11. missing input name throws

    Hi, I don't mean to take too much of your time, but wanted to let you know about another edge case I ran into and what I did to bypass it somewhat.

    There is this nice custom component called svelte-select.

    Normally, this component doesn't use a named input field, as the input field is only used to filter the select options, and it gives you an on:select handler. So, if you use this with use:form, you get this:

    index.ts:149 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'focus')
        at Object.onSubmitError (index.ts:149)
        at index.mjs:1
        at Array.forEach (<anonymous>)
        at HTMLButtonElement.<anonymous> (index.mjs:1)
    

    I fixed it with a fork of the package and using a hidden named input, and tested various scenarios including transforms. It wasn't pleasant but it was still easier than writing a component from scratch. Just wanted to let you know of the error encountered.

    Reviewed by basaran at 2021-10-27 08:49
  • 12. [Solid] Error: Cannot convert undefined or null to object when calling `validate` in `onMount`

    Describe the bug

    Hey! I have a form in a dynamic component which is shown and hidden based on the current view. When I change the view, the view with the form is unmounted and the existing errors disappear.

    To solve this I want to re-validate the form in onMount so it shows the errors again when I switch to that view. But whenever I call validate I get this error in the console: CleanShot 2022-05-13 at 09 34 40 CleanShot 2022-05-13 at 09 39 08 The error seems to be at the touched.set call?

    I also tried to reset the value and also set it as touched manually before but this doesn't work either.

    The form only has one text input with a string value.

    Let me know if you need a reproduction for it!

    Which package/s are you using?

    @felte/solid (SolidJS), @felte/reporter-solid, @felte/validator-zod

    Environment

    • OS: macOS Monterey v12.3.1
    • Browser: Chrome v101.0.4951.64
    • Version:
    "@felte/reporter-solid": "^1.2.2",
    "@felte/solid": "^1.2.1",
    "@felte/validator-zod": "^1.0.10",
    

    To reproduce

    1. Create form inside component
    2. Load the component dynamically so it unmounts and mounts again on change
    3. Call validate() inside Solid's onMount
    onMount(() => {
      validate()
    })
    
    1. Error happens when component mounts

    Small reproduction example

    No response

    Screenshots

    No response

    Additional context

    No response

    Reviewed by MarvinRudolph at 2022-05-13 07:49
  • 13. Default submit handler gets html, not json from Sveltekit page endpoints

    Describe the bug

    With Sveltekit page endpoints, the default submit handler receives HTML from the page (ie: the form itself) and not json from the endpoint (ie: the response on the submit).

    Page endpoints have the page and the endpoint on the same URL. You will need to include an Accept: application/json header to get JSON from the endpoint rather than HTML from the page.

    Which package/s are you using?

    felte (Svelte)

    Environment

    • OS: Windows 11
    • Browser: Chrome
    • Version: 101.0.4951.54

    To reproduce

    Page login.svelte with a form:

    <script lang="ts">
      import { createForm } from 'felte';
    
      const { form } = createForm({
        onSuccess(response, context) { console.log(response.status) } // <-- logs 200 from page, but want 401 from endpoint
      })
    </script>
    
    <form use:form method="post">
      <button type="submit">Go</button>
    </form>
    

    Endpoint login.ts with a request handler:

    import type { RequestHandler } from '@sveltejs/kit'
    
    export const post: RequestHandler = async ({ request }) => {
      return {
        status: 401 // <-- return 401 Not Authorized
      }
    }
    

    The page and the endpoint have the same url (/login). An Accept header should distinguish between page or endpoint.

    Small reproduction example

    No response

    Screenshots

    No response

    Additional context

    Sveltekit page endpoints (docs):

    If an endpoint has the same filename as a page (except for the extension), the page gets its props from the endpoint β€” via fetch during client-side navigation, or via direct function call during SSR. Because the page and route have the same URL, you will need to include an accept: application/json header to get JSON from the endpoint rather than HTML from the page.

    Workaround:

    You can also get the raw data by appending /__data.json to the URL, e.g. /items/[id]/__data.json.

    Reviewed by janwicher at 2022-05-09 16:01
  • 14. Zod Transforms not applying to values passed to onSubmit

    Describe the bug

    When overriding the onSubmit event handler, it seems that the values passed through are the raw values and aren't the values returned by the validator.

    In my case I'm applying a simple transform to make the value 100 times it's original value.

    I will say this may be expected functionality. However, my initial instinct is that the values passed through to the onSubmit handler, are already validated and therefore have ran through the parsing of the schema.

    Happy to be told that the expectation is to parse the values again in the onSubmit handler.

    Which package/s are you using?

    @felte/validator-zod

    Environment

    • OS: Windows 10
    • Browser: Microsoft Edge (No hate please)
    • Version: N/A

    To reproduce

    Please refer to the codesandbox example.

    The expected alert should contain the value in the input box * 100.

    Small reproduction example

    https://codesandbox.io/s/modest-christian-8zygm8

    Screenshots

    No response

    Additional context

    No response

    Reviewed by alex-way at 2022-04-25 15:39
  • 15. remove focus on error

    Hi all,

    is there an option to remove focus on error input?

    use case:

    1. user does not fill the input
    2. user try to submit form
    3. error appears on field
    4. user does not fill again the input and try to submit again

    current behaviour:

    • autoscroll to the input with focus on it

    desired behaviour:

    • no autoscroll happens (I want to show a div below the submit button)

    I use yup as validator and domReporter as error manager

    Reviewed by saiballo at 2022-04-14 16:11
  • 16. Field Arrays' delete on index removes also later elements

    Describe the bug When attempting to remove a field from a field array at index i using unsetField('fieldArray${index}'), all members of that array from i to end get removed.

    I tried to use alternative ways to remove single entries (e.g. slicing and combining arrays), but same issue re-occurs. However, when replicating similar form without felte using a local variable as 'store', it works as expected.

    To Reproduce Steps to reproduce the behavior:

    1. Grab code from https://felte.dev/docs/svelte/field-arrays
    2. Create multiple new interest items
    3. Attempt to remove some of the first items
    4. All items after that get removed

    Expected behavior Only the selected item should disappear.

    Screenshots By reactively logging interests -variable ($: console.log(interests)), it is shown that elemets are removed one-by-one from the array after calling remove function: image

    Environment (please complete the following information):

    Other stuff I'm quite new with svelte, so this can be user error of sort.

    Reviewed by Alphenus at 2022-03-15 09:56
  • 17. feat(dev): added Turbo monorepo / build runner

    https://turborepo.org/docs/getting-started

    FULL TURBO

    Without Turbo (PNPM recursive):

    time pnpm build_ => 92.68s user 5.85s system 503% cpu 19.581 total

    With Turbo:

    1. time pnpm build => 138.76s user 9.68s system 520% cpu 28.510 total (cold run, no cache)
    2. time pnpm build => 0.69s user 0.61s system 177% cpu 0.737 total (subsequent run with full cache hit and "replay" of dist output + console log)

    I added the clean-turbo script in package.json to delete Turbo caches (alternatively, --force or --no-cache can be passed to pnpm build on the command line).

    Note that the original build script was excluding specific packages, but Turbo builds everything faster.

    PS: I fixed a Preact typings issue (JSX), and I updated the PNPM lockfile in order to work around a React typings conflict (multiple different versions in node_module).

    UPDATE: I added a Turbo-driven alternative to the dev script in the root package.json. The developer experience is improved thanks to Turbo caching, compared with Rollup's own watcher mode.

    Reviewed by danielweck at 2022-03-04 08:48
React Hook Form Validation example with react-hook-form 7 and Bootstrap 4

React Hook Form Validation example with react-hook-form 7 and Bootstrap 4 Project setup In the project directory, you can run: npm install # or yarn i

Mar 17, 2022
React Hook Form: A Form whit some fiels and standard validation on it

React Hook Form: A Form whit some fiels and standard validation on it

Feb 10, 2022
This Login Form made using React hooks , React Js , Css, Json. This form have 3 inputs, it also validate those inputs & it also having length limitations.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2022
Form Builder powered by native-base & react-hook-form
Form Builder powered by native-base & react-hook-form

native-base-form-builder Form Builder written in typescript with inbuilt Validation, dropdown, autocomplete powered by react-hook-form & native-base.

Apr 12, 2022
A simple, fast, and opinionated form library for React & React Native focusing on UX.
A simple, fast, and opinionated form library for React & React Native focusing on UX.

react-ux-form A simple, fast, and opinionated form library for React & React Native focusing on UX. ?? Take a look at the demo website. Setup $ npm in

May 10, 2022
An easy-to-use form validation library for React, as of now it only supports email and required field validation, will be adding other quite soon.

react-use-form-validate Super customizable validation library for forms in react Install npm install --save react-use-form-validate Usage import { use

Mar 5, 2022
JavaScript Survey and Form Library
JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library. SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQue

May 15, 2022
Simple and performant form library built with MobX
Simple and performant form library built with MobX

MobX Easy Form Simple and performant form library built with MobX. Works with React, React Native and any other framework that supports MobX. Motivati

Dec 2, 2021
A form field creation library for React.

Introduction JSXFields is a library for creating form field elements in React with a function call instead of writing raw JSX. This is useful in a set

Nov 8, 2021
A bare minimal React form library for quick & simple forms.
A bare minimal React form library for quick & simple forms.

React library using React Hooks to build forms & let you switch in & out Bootstrap 4 styling. React Bare Forms aka RBF aims to be the easiest to use f

May 10, 2022
Modern Front End Form Management Library for React
Modern Front End Form Management Library for React

Rong Form Rong Form is a modern form management library for React Quick Start Install: yarn add rong-form -S npm i rong-form -S Import : import { Form

Mar 29, 2022
A Schema-First Form Library

A Schema-First Form Library

Apr 29, 2022
Formik-and-Yup-Reactjs - A React Validation form with formik and yup
Formik-and-Yup-Reactjs - A React Validation form with formik and yup

Signup form with formik Create simple signup form with formik and use yup for th

Apr 27, 2022
React hook for handling Laravel form requests and validation (for React & React Native)

React-use-form: React hook for handling form states, requests, and validation, compatible with React and React Native. βœ… Simple and intuitive API βœ… 10

Apr 5, 2022
A simple react and react native form validator inspired by Laravel validation.

Simple React Validator is exactly as it sounds. We wanted to build a validator for react that had minimal configuration and felt natural to use. It's configuration and usage is similar to the Laravel PHP framework and make validation as easy as one line.

Apr 27, 2022
A form input builder and validator for React JS

formsy-react A form input builder and validator for React. Quick Start API 1.x API Background christianalfoni wrote an article on forms and validation

Apr 28, 2022
MHF - an opinionated use case of React Hook Form and Material UI v5 written in TypeScript

MHF is an opinionated use case of React Hook Form (react-hook-form / RHF) and Material UI v5 (@mui/material / MUI) written in TypeScript

Apr 19, 2022
Paperfreeform - A Free Form Builder to save trees and create beautiful forms

PaperFreeForm PaperFreeForm is a Free Form Builder to save trees and create beau

Feb 24, 2022
Implementation Angular 13 Form Validation with Submit using Reactive Forms Module and Bootstrap 4.

Implementation Angular 13 Form Validation with Submit using Reactive Forms Module and Bootstrap 4. The form has: Full Name: required Username: require

May 5, 2022