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

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

Avatar for kubotak kubotak
December 15, 2022
Programming
1
1.6k

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

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

kubotak

December 15, 2022
Tweet

More Decks by kubotak

See All by kubotak
情報漏洩させないための設計
Avatar for kubotak kubotak
5
2k
Svelteコンポーネントの依存関係に秩序を〜
Avatar for kubotak kubotak
0
120
DMARCレポート可視化ツールを SvelteKitで作った話
Avatar for kubotak kubotak
2
520
Superforms本番投入で分かった良さとハマりどころ
Avatar for kubotak kubotak
0
860
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
Avatar for kubotak kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
Avatar for kubotak kubotak
1
1.2k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
Avatar for kubotak kubotak
2
780
SvelteKitを本番投入してみて
Avatar for kubotak kubotak
2
2.1k
PlaywrightによるSvelteコンポーネントテスト
Avatar for kubotak kubotak
0
3.9k

Other Decks in Programming

See All in Programming
The New Developer Workflow: How AI Transforms Ideas into Code
Avatar for Daniel Sogl danielsogl
0
140
Golangci-lint v2爆誕: 君たちはどうすべきか
Avatar for logica / Takuto Nagami logica0419
1
280
JAWS DAYS 2025 re_Cheers: WEB
Avatar for komakichi komakichi
0
120
Browser and UI #2 HTML/ARIA
Avatar for ken7253 ken7253
2
190
クラス設計の手順
Avatar for Goto Akiko akikogoto
0
120
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
Avatar for r-kagaya rkaga
4
1.5k
生成AI時代のフルスタック開発
Avatar for Kenn Ejima kenn
8
990
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
Avatar for shiro seike seike460
PRO
2
540
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
Avatar for dachi023 dachi023
0
140
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
Avatar for MinoDriven minodriven
8
2k
In geheimer Mission: AI Agents entwickeln
Avatar for Jörg Neumann joergneumann
0
120
Duke on CRaC with Jakarta EE
Avatar for ivargrimstad ivargrimstad
1
240

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.2k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.3k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
22
3.4k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.4k

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 :)`