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

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

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