Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Felteで作る簡単フォームバリデーション

kubotak
December 15, 2022
Programming
1
1.4k

 Felteで作る簡単フォームバリデーション

Nextbeat Tech Bar：広がるSvelteの輪！忘年LT会

kubotak

December 15, 2022
Tweet

More Decks by kubotak

See All by kubotak
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
60
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
440
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
650
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
10k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.1k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
700
SvelteKitを本番投入してみて
kubotak
2
1.9k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3.6k
AWS CDKでまるっと インフラ環境をIaCしたぞ！
kubotak
0
400

Other Decks in Programming

See All in Programming
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.2k
Amazon Qを使ってIaCを触ろう！
maruto
0
420
聞き手から登壇者へ： RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
距離関数を極める！ / SESSIONS 2024
gam0022
0
310
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Laravel や Symfony で手っ取り早く
OpenAPI のドキュメントを作成する
azuki
2
130
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2.1k
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1.1k
Jakarta EE meets AI
ivargrimstad
0
830
カンファレンスの「アレ」Webでなんとかしませんか？ / Conference “thing” Why don't you do something about it on the Web?
dero1to
1
120
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
130

Featured

See All Featured
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
730
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Building Applications with DynamoDB
mza
90
6.1k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Scaling GitHub
holman
458
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k

Transcript

  1. Copyright© M&A Felte Nextbeat Tech Bar Svelte LT Kenjiro Kubota

  2. Copyright© M&A Profile kubotak-is kubotak_public kenjiro.kubota M&A TypeScript PHP https://kubotak.page

    Web Laravel ( )

  3. Copyright© M&A

  4. Copyright© M&A UI

  5. Copyright© M&A GitHub https://github.com/kubotak-is/felte-form-sample ⾒ GitHub SvelteKit 1 . 0

    . 0

  6. Copyright© M&A Form Svelte src/lib/components/login-form.svelte

  7. Copyright© M&A Form src/lib/components/form/input-label.svelte

  8. Copyright© M&A Form src/lib/components/form/input-text.svelte

  9. Copyright© M&A Form src/lib/components/form/submit-button.svelte

  10. Copyright© M&A Felte A form library for Svelte, Solid and

    React HTML 5 name https://github.com/pablo-abc/felte

  11. Copyright© M&A Felte Form Actions

  12. Copyright© M&A

  13. Copyright© M&A Felte Felte

  14. Copyright© M&A yup yup

  15. Copyright© M&A

  16. Copyright© M&A email

  17. Copyright© M&A 6 255

  18. Copyright© M&A yup schema felte

  19. Copyright© M&A

  20. Copyright© M&A Form input name scheme

  21. Copyright© M&A Form input name scheme

  22. Copyright© M&A

  23. Copyright© M&A

  24. Copyright© M&A yup-locale-ja yup

  25. Copyright© M&A 🎉

  26. Copyright© M&A suggestive descriptive

  27. Copyright© M&A

  28. Copyright© M&A matches

  29. Copyright© M&A yup-password

  30. Copyright© M&A ⾒ Submit

  31. Copyright© M&A Felte errors

  32. Copyright© M&A ⾒

  33. Copyright© M&A ⾒ ⾒

  34. Copyright© M&A ⾒ $touched

  35. Copyright© M&A Felte email

  36. Copyright© M&A Required If

  37. Copyright© M&A Yes ⾒

  38. Copyright© M&A Svelte src/lib/components/required-if-form.svelte

  39. Copyright© M&A Form src/lib/components/form/input-radio.svelte

  40. Copyright© M&A Form src/lib/components/form/input-text.svelte

  41. Copyright© M&A

  42. Copyright© M&A

  43. Copyright© M&A when

  44. Copyright© M&A has_secret 1 secret

  45. Copyright© M&A has_secret 1 secret

  46. Copyright© M&A Yes ⾒ Yes ⾒ No ⾒

  47. Copyright© M&A React Simple Vue.js Easy Svelte Felte Svelte Simple

    Easy HTML name yup React Hook Form yup Svelte Felte + yup

  48. Copyright© M&A () => `Thanks for watching this :)`