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

Form Validation in Vue

Form Validation in Vue

Almost every web application makes use of forms in some way, as such developers always have to tackle form validations. Learn how to handle client-side form validation so you can display errors before the form is submitted. I will cover using Vuelidate and Vuetify to handle form validation.

Jennifer Bland

November 11, 2019
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

Transcript

  1. FORM VALIDATION
    JENNIFER BLAND

    View Slide

  2. Three Truths One Lie
    • I was elected to the school board at 16
    • Apple Computer paid for my MBA
    • My senior year of high school cost more than my
    freshman year at University
    • I earned only one A at University

    View Slide

  3. WHY PROVIDE FORM VALIDATION?

    View Slide

  4. VUETIFY

    View Slide

  5. View Slide

  6. View Slide

  7. LOGIN FORM

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. REGISTRATION FORM

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. VUELIDATE

    View Slide

  22. View Slide

  23. View Slide

  24. LOGIN FORM

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. REGISTRATION FORM

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. GET THE CODE

    View Slide

  41. View Slide

  42. View Slide

  43. GITHUB.COM/RATRACEGRAD

    View Slide

  44. Three Truths One Lie
    • I was elected to the school board at 16
    • Apple Computer paid for my MBA
    • My senior year of high school cost more than my
    freshman year at University
    • I earned only one A at University

    View Slide

  45. MEDIUM.COM/@RATRACEGRAD
    @RATRACEGRAD
    DEV.TO/RATRACEGRAD

    View Slide