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
57
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
440
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
640
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
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
250
as（型アサーション）を書く前にできること
marokanatani
9
2.6k
現場で役立つモデリング　超入門
masuda220
PRO
15
3.2k
Jakarta EE meets AI
ivargrimstad
0
510
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
Ethereum_.pdf
nekomatu
0
460
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
聞き手から登壇者へ： RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
280
Amazon Bedrock Agentsを用いてアプリ開発してみた！
har1101
0
330
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
880
受け取る人から提供する人になるということ
little_rubyist
0
230

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Done Done
chrislema
181
16k
Navigating Team Friction
lara
183
14k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Building Adaptive Systems
keathley
38
2.3k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
The Invisible Side of Design
smashingmag
298
50k
Product Roadmaps are Hard
iamctodd
PRO
49
11k

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