informel

1

0

338

informel@informel_js·15 Oca

Informel validation strategy: youtube.com/shorts/wREKFcE… First validation on blur, then validate corrections as the user types.

YouTube

English

1

0

42

informel@informel_js·6 Ara

This is how informel works! informel.site/showing-errors

Ben Holmes@BHolmesDev

@jamesqquick Absolutely! Best default is: - validate on-blur for the first pass (no distractions) - if there's an error, validate on-input (instant feedback as you correct)

English

14

informel@informel_js·28 Ağu

Need to validate an email field? Just use <input type="email" />. An url field? Use <input type="url" />. The value will be automatically validated as being a valid email or url. No need to come with your own regexes.

English

1

0

81

informel@informel_js·28 Ağu

Some good reminders about HTML5 built-in form validation features. freecodecamp.org/news/form-vali… Informel relies on those (checkValidity(), setCustomValidity() etc...) and augments them in order to show errors when it's appropriate. #showing-validation-errors" target="_blank" rel="nofollow noopener">informel.site/#showing-valid…

English

0

82

informel@informel_js·15 Nis

@renatoribz 👀 twitter.com/Julien_Delort/…

Introducing informel, a lightweight framework-agnostic headless forms library: juliendelort.github.io/informel/. Main features 👇 (Using React? Check out the last tweet). #forms #formlibrary #javascript #react #webcomponents #FrontEnd

QME

1

12

Renato Ribeiro@renatoribz·14 Nis

What's the best form library for React currently?

English

1

3

1.5K

informel@informel_js·13 Nis

@stevekrouse @ValDotTown Couple that with informel, which adds front end validation, automatically sends form data as ajax and works with vanilla html forms and it's 🤌 #sending-ajax-request-on-submit" target="_blank" rel="nofollow noopener">informel.site/submitting#sen… twitter.com/Julien_Delort/…

Introducing informel, a lightweight framework-agnostic headless forms library: juliendelort.github.io/informel/. Main features 👇 (Using React? Check out the last tweet). #forms #formlibrary #javascript #react #webcomponents #FrontEnd

English

1

20

Steve Krouse@stevekrouse·12 Nis

is @ValDotTown the easiest way to save data from an HTML form? youtube.com/watch?v=YfhPKl…

YouTube

English

2

9

1K

informel@informel_js·11 Nis

@laurieontech Suggesting informel 👀 It's framework agnostic: works in React but also in any other framework or vanilla js. No need to look for a new forms library if you change your stack! twitter.com/Julien_Delort/…

Introducing informel, a lightweight framework-agnostic headless forms library: juliendelort.github.io/informel/. Main features 👇 (Using React? Check out the last tweet). #forms #formlibrary #javascript #react #webcomponents #FrontEnd

English

2

135

Laurie@laurieontech·10 Nis

What do people use for forms in react these days?

English

21

3

21

21.1K

informel@informel_js·4 Nis

@hk_Vancouver @SalOrozco23 Easy way to add validation 👀: twitter.com/informel_js/st…

informel@informel_js

informel tip #6 You don't need much to add validation to your forms: - Wrap the <form> element with <inform-el> - And wrap your fields with <inform-fields> And that's it! Validation errors will be shown! informel doesn't change your forms, it just enhances them! @reactjs👇

English

14

informel@informel_js·1 Nis

@kentcdodds @nickemccurdy Suggesting informel as well 👀 It's framework agnostic: works in React but also in any other framework or vanilla js. No need to look for a new forms library if you change your stack! twitter.com/Julien_Delort/…

Introducing informel, a lightweight framework-agnostic headless forms library: juliendelort.github.io/informel/. Main features 👇 (Using React? Check out the last tweet). #forms #formlibrary #javascript #react #webcomponents #FrontEnd

English

77

Kent C. Dodds 🏹@kentcdodds·1 Nis

@nickemccurdy I don't. But I would probably use react hook form if I needed one.

English

0

15

1.4K

Kent C. Dodds 🏹@kentcdodds·1 Nis

This is validating. I've been teaching for years that folks should go against the docs and instead default to uncontrolled inputs instead. Glad to see the react docs get updated in this way.

English

7

10

223

76.7K

informel@informel_js·30 Mar

@DavidKPiano This is what informel relies on under the hood and it was created to enhance it. For example, getting form values that way doesn't work well with checkboxes. Or required fields are marked invalid on load before any interaction. Informel makes those features what they should be.

English

13

David K 🎹@DavidKPiano·12 Eyl

⚛️ React tip: for most forms, you don't need useState()... or any hooks at all! You can read form data directly from the form by element name: Object.fromEntries(new FormData(formEl)); You don't even need a form library most of the time.

English

92

493

3.6K

0

informel@informel_js·30 Mar

@jacobmparis This is what informel uses under the hood for custom validation 👀 #custom-validation-rules" target="_blank" rel="nofollow noopener">informel.site/validation-rul… #usetheplatform

English

0

23

jacob paris ▲@jacobmparis·29 Mar

Little-known tip 🔥 input.setCustomValidity( `This is a browser native custom error message`, ) - Put that in an onInput handler - wrap some conditions around it - and you get browser-native form validation that can depend on other inputs jacobparis.com/guides/react-f…

English

4

24

1.7K

informel@informel_js·29 Mar

Form libraries should make things simpler but still leave you in control. They shouldn't take your <input> away from you in favor of some custom <Input/> component. #usetheplatform

English

1

0

128

informel@informel_js·28 Mar

@asidorenko_ 💯. informel was built with that simplicity in mind. That form remains the same, just wrapped within <InformEl>, which brings more features: custom errors, getting the values, dirty state etc...

English

44

Alex Sidorenko@asidorenko_·27 Mar

Multi-page forms with validation can be simple.

English

7

18

199

39.3K

informel@informel_js·27 Mar

@asidorenko_ This works... until you have a checkbox 🙂. You'll have to handle the specificity of different element types and repeat this logic for every form. With informel you can just wrap the form with <InformEl> and listen to onInformSubmit. You'll get the values directly as an object!

English

20

Alex Sidorenko@asidorenko_·2 Şub

Something to try before reaching for React form library.

English

22

25

441

58.9K

informel@informel_js·26 Mar

@feelbettermyluv Ah I see, they do backend validation as well and wire the errors back to the front-end. We only support front-end validation for now. That's a nice implementation, though, we might consider something like this for a future version.

English

9

informel@informel_js·26 Mar

@philkellr @gommo It works also well with React: twitter.com/informel_js/st… Tailwind as well, you are still fully in control of the styles, so Tailwind works just as it normally would.

informel@informel_js

Same thing for @reactjs use the `<InformEl>` and `<InformField>` component. Common mistake: don't forget `import "informel"`. It is still needed once at the root of the app for registering the web components. informel.site/react

English

1

19

Philipp Keller@philkellr·26 Mar

@informel_js @gommo Looks nice. How well does it play with react / tailwindCSS?

English

0

2

15

Philipp Keller@philkellr·26 Mar

I totally underestimated form handling I'm building a multistep form to enter a real estate listing, including multi-image upload My estimate: 15h Spent so far: >30h I might lack experience. Or form handling is really hard. Tips welcome. Stack: next.js / Python

English

28

0

36

9.4K

informel@informel_js·26 Mar

@feelbettermyluv Technically it should work with SSR since the web component just wraps the form and it should kick in during hydration. We have a specific version in the docs for Remix: informel.site/remix

English

17

informel@informel_js·26 Mar

@philkellr @gommo Informel adds the validation part, and it relies on the native HTML attributes (required, min/max length, pattern etc...) 🙂 twitter.com/informel_js/st…

informel@informel_js

informel tip #6 You don't need much to add validation to your forms: - Wrap the <form> element with <inform-el> - And wrap your fields with <inform-fields> And that's it! Validation errors will be shown! informel doesn't change your forms, it just enhances them! @reactjs👇

English

2

77

Philipp Keller@philkellr·26 Mar

@gommo Thanks for the compassion… It seems that *some* part are supported by html now (like required and minLength/maxLength), but validation errors are not, the label/input combo is super verbose, …

English

2

0

1

307

informel@informel_js·23 Mar

@mitchellbwright Informel supports React 👀 twitter.com/Julien_Delort/…

Introducing informel, a lightweight framework-agnostic headless forms library: juliendelort.github.io/informel/. Main features 👇 (Using React? Check out the last tweet). #forms #formlibrary #javascript #react #webcomponents #FrontEnd

English

15

Mitchell Wright@mitchellbwright·22 Mar

What's the React form library everyone is using these days? Just wondering if there's any that I should check out 👀

English

0

416

informel@informel_js·23 Mar

@Julien_Delort New docs site url! informel.site

English