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

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

kubotak
December 15, 2022

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

Nextbeat Tech Bar:広がるSvelteの輪!忘年LT会

kubotak

December 15, 2022
Tweet

More Decks by kubotak

Other Decks in Programming

Transcript

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


    Kenjiro Kubota

    View Slide

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

    View Slide

  3. Copyright© M&A

    View Slide

  4. Copyright© M&A
    UI

    View Slide

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



    GitHub


    SvelteKit
    1
    .
    0
    .
    0

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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


    HTML
    5

    name




    https://github.com/pablo-abc/felte

    View Slide

  11. Copyright© M&A
    Felte
    Form Actions


    View Slide

  12. Copyright© M&A

    View Slide

  13. Copyright© M&A
    Felte
    Felte

    View Slide

  14. Copyright© M&A
    yup
    yup

    View Slide

  15. Copyright© M&A

    View Slide

  16. Copyright© M&A
    email

    View Slide

  17. Copyright© M&A
    6 255

    View Slide

  18. Copyright© M&A
    yup schema felte

    View Slide

  19. Copyright© M&A

    View Slide

  20. Copyright© M&A
    Form
    input name scheme

    View Slide

  21. Copyright© M&A
    Form
    input name scheme

    View Slide

  22. Copyright© M&A

    View Slide

  23. Copyright© M&A

    View Slide

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

    View Slide

  25. Copyright© M&A
    🎉

    View Slide

  26. Copyright© M&A
    suggestive descriptive

    View Slide

  27. Copyright© M&A

    View Slide

  28. Copyright© M&A
    matches

    View Slide

  29. Copyright© M&A
    yup-password

    View Slide

  30. Copyright© M&A
    ⾒ Submit

    View Slide

  31. Copyright© M&A
    Felte
    errors

    View Slide

  32. Copyright© M&A

    View Slide

  33. Copyright© M&A


    View Slide

  34. Copyright© M&A



    $touched

    View Slide

  35. Copyright© M&A
    Felte


    email

    View Slide

  36. Copyright© M&A
    Required If

    View Slide

  37. Copyright© M&A
    Yes ⾒

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. Copyright© M&A

    View Slide

  42. Copyright© M&A

    View Slide

  43. Copyright© M&A
    when

    View Slide

  44. Copyright© M&A
    has_secret 1 secret

    View Slide

  45. Copyright© M&A
    has_secret 1 secret

    View Slide

  46. Copyright© M&A
    Yes ⾒


    Yes ⾒


    No ⾒


    View Slide

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


    Felte Svelte Simple Easy


    HTML name




    yup React Hook Form yup


    Svelte Felte + yup

    View Slide

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

    View Slide