The Art of Form Validation

A form could be simple or exhaustive, can have simple or dynamic values… Either way, all payloads between client and server should be validated. And when errors happen (because they will happen), the user needs help and guidance to solve the problem. How can you achieve the best combination of User Interface (UI), User Experience (UX), and Developer Experience (DX)? Join me and learn all the good tips and tricks using the community's favorite stack: Laravel, Vue.

↓↓↓
Live recording of this talk at Laracon.EU
https://youtube.com/watch?v=rkdlJeHTeCY

Transcript

1. FORM validation
   #TheLaravelKid BEGINS
   LARACON.EU
   The Art of
   

   View Slide

2. So, validtaion…
   

   View Slide

3. So, validation…
   It's required, right?
   

   View Slide

4. I'm Caneco
   Full-Stack Developer ! MEDICARE
   caneco.xyz
   

   View Slide

5. I'm Caneco
   .PHP .JS .HTML .CSS .JSON .SQL
   .GIT .SH .SVG .PNG .PSD .AI
   

   View Slide

6. I'm Caneco
   @enunomaduro's "Schoger"
   

   View Slide

7. I'm Caneco
   from Lisbon, Portugal
   Netherlands here
   Spain here
   Portugal here
   

   View Slide

8. WARNING
   ALL THE FOLLOWING SLIDES CONTAIN
   VALUABLE INFORMATION FOR YOUR DAILY
   LIFE… ALL GIFS ARE FROM THE BADASS TV
   SHOW COBRA KAI THAT YOU ALL MUST
   WATCH… AND ALL THE SLIDES, AND
   CONTENT ARE 100% MADE ON KEYNOTE ̈
   

   View Slide

9. LET'S BEGIN
   

   View Slide

10. Why validate?
    

    View Slide

11. On a regular day in 2019
    

    View Slide

12. 500 million tweets
    source: weforum.org
    

    View Slide

13. 294 billion emails
    source: weforum.org
    

    View Slide

14. 5 billion searches
    source: weforum.org
    

    View Slide

15. ~300 new posts on
    laracasts.com/discuss
    source: the Jeffrey Way
    

    View Slide

16. ~64.5K downloads
    of Spatie packages
    source: spatie.be/open-source
    

    View Slide

17. It's a LOT of data
    

    View Slide

18. It's a
    LOT of data
    

    View Slide

19. through APIs
    [GET] skyscanner-example.dev/v1/flights
    [PATCH] zomato-example.dev/place/123/book
    [GET] openweather-example.dev/fatima
    [GET] musixmatch-example.dev/top-10
    [GET] nasa-example.dev/v9999/planet-x
    [GET] numbers-example.dev/random-number
    [GET] urbandictionary-example.dev/tldr
    [GET] tempmail-example.dev/fresh
    [GET] moviedatabase-example.dev/v1/top/horror
    [GET] ip-example.dev/127.0.0.1
    

    View Slide

20. or in forms
    

    View Slide

21. Validation… do
    we really need it?
    

    View Slide

22. Can't we trust our users?
    

    View Slide

23. MOST DEF
    

    View Slide

24. It's purely just for fun
    

    View Slide

25. Validation 101
    

    View Slide

26. SIGN IN
    Sign in
    Email address
    Password
    SENDING
    

    View Slide

27. SIGN IN
    Sign in
    These credentials do not match our records.
    Email address
    Password
    

    View Slide

28. 1
    2
    3
    4
    ▶
    9
    10
    11
    12
    name="username"
    type="text"
    "#
    ""$
    name="password"
    type="password"
    "#
    

    View Slide

29. 1
    2
    3
    4
    5
    ▶
    8
    9
    10
    11
    12
    name="username"
    type="text"
    required
    "#
    ""$
    name="password"
    type="password"
    required
    "#
    

    View Slide

30. SIGN IN
    Sign in
    Email address
    Password
    Please fill in this field.
    Please fill in this field.
    

    View Slide

31. Sign in
    Email address
    example
    Password
    ●●●●●●
    SIGN IN
    SENDING
    

    View Slide

32. SIGN IN
    Sign in
    These credentials do not match our records.
    Email address
    example
    Password
    

    View Slide

33. 1
    2
    3
    4
    5
    ▶
    8
    9
    10
    11
    12
    name="username"
    type="text"
    required
    "#
    ""$
    name="password"
    type="password"
    required
    "#
    

    View Slide

34. 1
    2
    3
    4
    5
    ▶
    8
    9
    10
    11
    12
    name="username"
    type="email"
    required
    "#
    ""$
    name="password"
    type="password"
    required
    "#
    

    View Slide

35. SIGN IN
    Sign in
    Email address
    example
    Password
    ●●●●●●
    Please include an '@' in the email address.
    

    View Slide

36. SIGN IN
    Sign in
    Email address
    example@
    Password
    ●●●●●●
    Please enter a part following '@'.
    

    View Slide

37. SIGN IN
    Sign in
    Email address
    example@
    Password
    ●●●●●●
    SENDING
    email
    

    View Slide

38. SIGN IN
    Sign in
    These credentials do not match our records.
    Email address
    example@email
    Password
    ●●●●●●
    

    View Slide

39. 1
    2
    3
    4
    5
    ▶
    8
    9
    10
    11
    12
    name="username"
    type="email"
    required
    "#
    ""$
    name="password"
    type="password"
    required
    "#
    

    View Slide

40. 1
    2
    3
    4
    5
    6
    ▶
    8
    9
    10
    11
    12
    name="username"
    type="email"
    pattern=".+@.+\"%+"
    required
    "#
    ""$
    name="password"
    type="password"
    required
    "#
    

    View Slide

41. 1
    2
    3
    4
    5
    6
    ▶
    8
    9
    10
    11
    12
    13
    name="username"
    type="email"
    pattern=".+@.+\"%+"
    required
    "#
    ""$
    name="password"
    type="password"
    minlength="6"
    required
    "#
    

    View Slide

42. 1
    2
    3
    4
    5
    6
    ▶
    8
    9
    10
    11
    12
    13
    14
    name="username"
    type="email"
    pattern=".+@.+\"%+"
    required
    "#
    ""$
    name="password"
    type="password"
    minlength="6"
    pattern="^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}$"
    required
    "#
    

    View Slide

43. 1
    2
    3
    4
    5
    6
    ▶
    8
    9
    10
    11
    12
    13
    14
    name="username"
    type="email"
    pattern=".+@.+\"%+"
    required
    "#
    ""$
    name="password"
    type="password"
    minlenght="6"
    pattern="^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}$"
    required
    "#
    

    View Slide

44. Thank you
    

    View Slide

45. Not exactly…
    

    View Slide

46. HTML5 validation
    depends on the browser
    

    View Slide

47. And it's not that
    simple nor pretty
    

    View Slide

48. 1
    2
    3
    4
    5
    6
    ▶
    8
    9
    10
    11
    12
    13
    name="username"
    type="email"
    pattern=".+@.+\"%+"
    required
    "#
    ""$
    name="password"
    type="password"
    minlenght="6"
    pattern="^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,}$"
    required
    "#
    

    View Slide

49. 1
    2
    3
    4
    5
    6
    ▶
    20
    function "'invoke(Request $request)
    {
    $request"(validate([
    'username' ") 'required|email',
    'password' ") 'required|min:6|strong_password',
    ]);
    ""$
    }
    

    View Slide

50. JavaScript
    

    View Slide

51. 1
    ▶
    42
    
    ""$
    "*form>
    

    View Slide

52. 1
    ▶
    42
    
    ""$
    "*form>
    

    View Slide

53. jQueryValidate.js
    

    View Slide

54. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var rules = {
    username: {
    required: true,
    email: true,
    },
    password: {
    required: true,
    minlength: 6,
    },
    }
    

    View Slide

55. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var rules = {
    username: {
    required: true,
    email: true,
    },
    password: {
    required: true,
    minlength: 6,
    },
    }
    $("#login").validate(rules)
    

    View Slide

56. validate.js
    

    View Slide

57. 1
    2
    3
    4
    let input = {
    username: document.getElementById('username').value(),
    password: document.getElementById('password').value(),
    }
    

    View Slide

58. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    let input = {
    username: document.getElementById('username').value(),
    password: document.getElementById('password').value(),
    }
    let rules = {
    username: {
    presence: true,
    email: true
    },
    password: {
    presence: true,
    length: { minimum: 6 },
    },
    }
    

    View Slide

59. 1
    ▶
    4
    7
    6
    ▶
    15
    16
    17
    18
    19
    let input = {
    !!"
    }
    let rules = {
    ""$
    }
    if (validate(input, rules)) {
    "+
    }
    

    View Slide

60. VeeValidate
    

    View Slide

61. > npm install vee-validate
    

    View Slide

62. 1
    2
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    

    View Slide

63. 1
    2
    3
    4
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    Vue.use(VeeValidate)
    

    View Slide

64. 1
    2
    3
    4
    5
    name="username"
    type="email"
    required
    "#
    

    View Slide

65. 1
    2
    3
    4
    5
    6
    7
    name="username"
    v-model="username"
    v-validate
    type="email"
    required
    "#
    

    View Slide

66. 1
    2
    3
    4
    5
    6
    7
    name="username"
    v-model="username"
    v—validate
    type="email"
    required
    "#
    

    View Slide

67. 1
    2
    3
    4
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    Vue.use(VeeValidate)
    

    View Slide

68. 1
    2
    3
    4
    5
    6
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'
    Vue.use(VeeValidate, {
    useConstraintAttrs: false,
    })
    

    View Slide

69. 1
    2
    3
    4
    5
    6
    7
    name="username"
    v-model="username"
    v-validate
    type="email"
    required
    "#
    

    View Slide

70. 1
    2
    3
    4
    5
    6
    name="username"
    v-model="username"
    v-validate="'required|email'"
    type="text"
    "#
    

    View Slide

71. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    alpha
    alpha_dash
    alpha_num
    alpha_spaces
    before
    between
    confirmed
    credit_card
    date_between
    date_format
    decimal
    digits
    dimensions
    email
    image
    included
    integer
    ip
    is
    is_not
    length
    max_value
    mimes
    min
    max
    min_value
    excluded
    numeric
    regex
    required
    required_if
    size
    url
    

    View Slide

72. Add custom rules
    

    View Slide

73. 1 import { Validator } from 'vee-validate'
    

    View Slide

74. 1
    2
    3
    4
    5
    6
    7
    import { Validator } from 'vee-validate'
    import { STRONG_PASS_REGEX } from '@/helpers/regex_rules'
    const strongPassword = {
    getMessage: field ") `${field} is weak.`,
    validate: value ") STRONG_PASS_REGEX.test(value)
    }
    

    View Slide

75. 1
    2
    3
    4
    5
    6
    7
    import { Validator } from 'vee-validate'
    import { STRONG_PASS_REGEX } from '@/helpers/regex_rules'
    const strongPassword = {
    getMessage: field ") `${field} is weak.`,
    validate: value ") STRONG_PASS_REGEX.test(value)
    }
    

    View Slide

76. 1
    2
    3
    4
    5
    6
    7
    import { Validator } from 'vee-validate'
    import { STRONG_PASS_REGEX } from '@/helpers/regex_rules'
    const strongPassword = {
    getMessage: field ") `${field} is weak.`,
    validate: value ") STRONG_PASS_REGEX.test(value)
    }
    

    View Slide

77. 1
    2
    3
    4
    5
    6
    7
    8
    9
    import { Validator } from 'vee-validate'
    import { STRONG_PASS_REGEX } from '@/helpers/regex-rules'
    const strongPassword = {
    getMessage: field ") `${field} is weak.`,
    validate: value ") STRONG_PASS_REGEX.test(value)
    }
    Validator.extend('strong_password', strongPassword)
    

    View Slide

78. 1
    2
    3
    4
    5
    6
    name="password"
    v-model="password"
    v—validate="'required|strong_password'"
    type="text”
    "#
    

    View Slide

79. Using ErrorBag
    

    View Slide

80. 1
    2
    3
    4
    5
    6
    7
    class="field-input"
    name="username"
    v-model="username"
    v-validate="'required|email'"
    type="text"
    "#
    

    View Slide

81. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    Email address
    "*label>
    class="field-input"
    name="username"
    v-model="username"
    v-validate="'required|email'"
    type="text"
    "#
    

    View Slide

82. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    class="field-input"
    :class="{ 'has-error': errors.has('username') }"
    >
    Email address
    "*label>
    class="field-input"
    :class="{ 'has-error': errors.has('username') }"
    name="username"
    v-model="username"
    v-validate="'required|email'"
    type="text"
    "#
    

    View Slide

83. 1
    ▶
    6
    7
    ▶
    14
    15
    16
    17
    
    ""$
    "*label>
    ""$
    "#
    
    The username must be a valid email.
    "*p>
    

    View Slide

84. 1
    ▶
    6
    7
    ▶
    14
    15
    16
    17
    
    ""$
    "*label>
    ""$
    "#
    
    {{ errors.first('username') }}
    "*p>
    

    View Slide

85. SIGN IN
    Sign in
    The username must be a valid email.
    Email address
    example
    Password
    ●●●●●●
    Email address
    example
    

    View Slide

86. 1
    2
    3
    4
    {{ errors.any() }}
    {{ errors.all() }}
    {{ errors.count() }}
    {{ errors.clear() }}
    

    View Slide

87. WAIT?! ALL OF THAT?
    

    View Slide

88. Why validate
    on the client side?
    

    View Slide

89. Assure the data is good
    

    View Slide

90. Quick feedback
    

    View Slide

91. Real-time feedback
    

    View Slide

92. Reduce server validation
    

    View Slide

93. Now in the server side
    

    View Slide

94. View Slide

95. Why validate
    on the server side?
    

    View Slide

96. Reassure the data is good
    

    View Slide

97. Server-side checking
    

    View Slide

98. Domain rules
    

    View Slide

99. 1
    2
    3
    4
    5
    6
    ▶
    20
    function "'invoke(Request $request)
    {
    $request"(validate([
    'username' ") 'required|email',
    'password' ") 'required|min:6|strong_password',
    ]);
    ""$
    }
    

    View Slide

100. 1
     2
     3
     4
     5
     6
     7
     8
     9
     HTTP/1.1 422 Unprocessable Entity
     Content-Type: application/json; charset=utf-8
     ""$
     "data": {
     "errors": {
     "email": [
     "The email must be a valid email address."
     ],
     ""$
     

     View Slide

101. 1
     2
     3
     4
     5
     6
     7
     8
     9
     HTTP/1.1 422 Unprocessable Entity
     Content-Type: application/json; charset=utf-8
     ""$
     "data": {
     "errors": {
     "email": [
     "The email must be a valid email address."
     ],
     ""$
     

     View Slide

102. 1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     HTTP/1.1 422 Unprocessable Entity
     Content-Type: application/json; charset=utf-8
     ""$
     "data": {
     "errors": {
     "email": [
     "The email must be a valid email address."
     ],
     "password": [
     "The password must be at least 6 characters",
     "The password must have 2 uppercase letters 1 special letter 2 digi
     ]
     ""$
     

     View Slide

103. 1
     2
     ▶
     8
     ▶
     12
     13
     if (response.data.errors.email) {
     if (/required/i.test(response.data.errors)) {
     ""$
     } else if (/invalid/i.test(response.data.errors)) {
     ""$
     }
     }
     

     View Slide

104. How to simplify
     the conversation?
     

     View Slide

105. > art make:request SubmitRequest
     

     View Slide

106. 1
     2
     3
     4
     5
     6
     7
     public function rules()
     {
     return [
     'username' ") 'required|email',
     'password' ") 'required|min:6|strong_password',
     ];
     }
     

     View Slide

107. 1
     2
     3
     4
     5
     6
     7
     8
     9
     public function messages()
     {
     return [
     'required' ") ':attribute.required',
     'email' ") 'email.invalid',
     'password.min' ") 'password:min',
     'strong_password' ") 'password_not_strong',
     ];
     }
     

     View Slide

108. 1
     2
     3
     4
     5
     6
     7
     8
     9
     public function failedValidation(Validator $validator)
     {
     throw (new HttpResponseException(
     response()"(json([
     'message' ") 'The given data was invalid.',
     'errors' ") $validator"(errors()"(all(),
     ], 422)
     ));
     }
     

     View Slide

109. 1
     2
     3
     4
     5
     6
     7
     8
     9
     public function failedValidation(Validator $validator)
     {
     throw (new HttpResponseException(
     response()"(json([
     'message' ") 'The given data was invalid.',
     'errors' ") $validator"(errors()"(all(),
     ], 418)
     ));
     }
     

     View Slide

110. 1
     2
     3
     4
     5
     6
     7
     8
     9
     HTTP/1.1 418 I'm a teapot
     Content-Type: application/json; charset=utf-8
     ""$
     {
     "message": "The given data was invalid.",
     "errors": [
     "email.invalid"
     ]
     }
     

     View Slide

111. View Slide

112. Validation examples
     

     View Slide

113. email fields
     

     View Slide

114. Simple form
     Email address
     SUBMIT
     The email field is required.
     

     View Slide

115. Simple form
     Email address
     SUBMIT
     The email must be a valid email address.
     example
     

     View Slide

116. 1
     2
     3
     4
     5
     6
     name="email"
     v-model="email"
     v—validate="'required|email'"
     type="text"
     "#
     

     View Slide

117. " prevent the errors
     

     View Slide

118. Simple form
     Email address
     SUBMIT
     Did you mean example@hotmail.com?
     example@hotmale.com
     

     View Slide

119. Simple form
     Email address
     SUBMIT
     example@gmail.com
     example@gmail.com
     example@hotmail.com
     example@outlook.com
     example@me.com
     

     View Slide

120. 1
     2
     3
     4
     5
     6
     7
     8
     9
     function "'invoke(Request $request)
     {
     $request"(validate([
     'email' ") [
     'required',
     'email',
     ]
     ]);
     }
     

     View Slide

121. 1
     2
     3
     4
     5
     6
     7
     8
     9
     function "'invoke(Request $request)
     {
     $request"(validate([
     'email' ") [
     'required',
     'email', "+ taylor@laravel.ceo
     ]
     ]);
     }
     

     View Slide

122. Simple form
     Email address
     SUBMIT
     taylor@laravel.ceo
     

     View Slide

123. 1
     2
     3
     4
     5
     6
     7
     8
     9
     function "'invoke(Request $request)
     {
     $request"(validate([
     'email' ") [
     'required',
     'email',
     ]
     ]);
     }
     

     View Slide

124. 1
     2
     3
     4
     5
     6
     7
     8
     9
     function "'invoke(Request $request)
     {
     $request"(validate([
     'email' ") [
     'required',
     'email:rfc,dns', "+ new in Laravel 5.8.33
     ]
     ]);
     }
     

     View Slide

125. 1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     function "'invoke(Request $request)
     {
     $request"(validate([
     'email' ") [
     'required',
     'email:rfc,dns',
     'unique:users.email',
     ]
     ]);
     }
     

     View Slide

126. 1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     function "'invoke(Request $request)
     {
     $request"(validate([
     'email' ") [
     'required',
     'email:rfc,dns', "+ ", ATTENTION
     'unique:users.email', "+ ", ATTENTION
     ]
     ]);
     }
     

     View Slide

127. 1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     function "'invoke(Request $request)
     {
     $request"(validate([
     'email' ") [
     'bail',
     'required',
     'email:rfc,dns',
     'unique:users.email',
     ]
     ]);
     }
     

     View Slide

128. Remember SubmitRequest?
     

     View Slide

129. 1
     2
     3
     4
     5
     6
     7
     8
     HTTP/1.1 418 I'm a teapot
     Content-Type: application/json; charset=utf-8
     ""$
     "data": {
     "errors": [
     "email.invalid",
     ]
     ""$
     

     View Slide

130. 1
     2
     3
     4
     5
     6
     7
     this.$http.post('/submit’)
     .then(response ") {
     "+
     })
     .catch({ response } ") {
     "+
     })
     

     View Slide

131. 1
     ▶
     5
     6
     7
     8
     9
     this.$http.post('/submit’)
     ""$
     .catch({ response } ") {
     if (response.status ""- 418) {
     "+
     }
     })
     

     View Slide

132. 1
     ▶
     5
     6
     7
     8
     9
     10
     11
     this.$http.post('/submit’)
     ""$
     .catch({ response } ") {
     if (response.status ""- 418) {
     if (response.data.errors.includes('email.invalid')) {
     "+
     }
     }
     })
     

     View Slide

133. 1
     ▶
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     this.$http.post('/submit’)
     ""$
     .catch({ response } ") {
     if (response.status ""- 418) {
     let errors = response.data.errors
     if (response.data.errors.includes('email.invalid')) {
     this.$validator.errors.add({
     field: 'email',
     msg: 'The email must be a valid email address.',
     })
     }
     }
     })
     

     View Slide

134. 1
     ▶
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     this.$http.post('/submit’)
     ""$
     .catch({ response } ") {
     if (response.status ""- 418) {
     let errors = response.data.errors
     if (errors.includes('email.invalid')) {
     this.$validator.errors.add({
     field: 'email',
     msg: 'The email must be a valid email address.',
     })
     this.$el.username.focus()
     }
     }
     })
     

     View Slide

135. phone fields
     

     View Slide

136. 1
     2
     3
     4
     5
     6
     name="phone"
     v-model="phone"
     v-validate="'required'"
     type="text"
     "#
     

     View Slide

137. 1
     2
     3
     4
     5
     6
     name="phone"
     v-model="phone"
     v-validate="'required|phone'"
     type="text"
     "#
     

     View Slide

138. 1
     2
     3
     4
     5
     6
     7
     8
     import { Validator } from 'vee-validate'
     const phone = {
     getMessage: field ") `The ${field} must be a valid phone number.`,
     validate: value ") {
     return /^[0-9]{9}$/.test(value)
     }
     }
     

     View Slide

139. 1
     2
     3
     4
     5
     6
     7
     8
     import { Validator } from 'vee-validate'
     const phone = {
     getMessage: field ") `The ${field} must be a valid phone number.`,
     validate: value ") {
     return /^2[0-9]{8}|9[1236][0-9]{7}$/.test(value)
     }
     }
     

     View Slide

140. Simple form
     Mobile number
     SUBMIT
     The phone must be a valid phone number.
     201000123
     

     View Slide

141. " prevent the errors
     

     View Slide

142. Simple form
     Mobile number
     SUBMIT
     912367125637512123987
     

     View Slide

143. Simple form
     Mobile number
     SUBMIT
     asdasdasd
     

     View Slide

144. 1
     2
     3
     4
     5
     6
     name="phone"
     v-model="phone"
     v-validate="'required|phone'"
     type="text"
     "#
     

     View Slide

145. 1
     2
     3
     4
     5
     6
     7
     name="phone"
     v-model="phone"
     v-validate="'required|phone'"
     type="text"
     maxlength="9"
     "#
     

     View Slide

146. > npm install vee-mask
     

     View Slide

147. 1
     2
     import Vue from 'vue'
     import VeeMask from 'vee-mask'
     

     View Slide

148. 1
     2
     3
     4
     import Vue from 'vue'
     import VeeMask from 'vee-mask'
     Vue.use(VeeMask)
     

     View Slide

149. 1
     2
     3
     4
     5
     6
     7
     8
     name="phone"
     v-model="phone"
     v-validate="'required|phone'"
     v-mask="'#########'"
     type="text"
     maxlength="9"
     "#
     

     View Slide

150. 1
     2
     3
     4
     5
     6
     7
     8
     name="phone"
     v-model="phone"
     v-validate="'required|phone'"
     v-mask="'"". "". "".'"
     type="text"
     maxlength="11"
     "#
     

     View Slide

151. Simple form
     Mobile number
     SUBMIT
     213 123 123
     

     View Slide

152. zip, iban, address, weight…
     

     View Slide

153. They follow the same idea
     

     View Slide

154. WAX ON, WAX OFF
     

     View Slide

155. Extra tricks
     

     View Slide

156. autofocus
     

     View Slide

157. View Slide

158. View Slide

159. Sign up
     Full name
     Email address
     Phone
     CONTINUE
     |
     

     View Slide

160. " attention to mobile
     

     View Slide

161. Sign up
     Full name
     Email address
     Phone
     CONTINUE
     |
     Done
     Q W E R T Y U I O P
     space return
     123
     A S D F G H J K L
     ⌫
     ⇧ Z X C V B N M
     

     View Slide

162. View Slide

163. View Slide

164. 1
     2
     3
     4
     5
     6
     7
     8
     Vue.directive('autofocus', {
     inserted: (el, binding) ") {
     if (! isMobile) {
     el.setAttribute('autofocus', 'autofocus')
     el.focus() "+ Justin Case
     }
     },
     })
     

     View Slide

165. input types
     

     View Slide

166. View Slide

167. SUBMIT
     The Form
     Email field
     |
     Done
     Q W E R T Y U I O P
     space return
     123
     A S D F G H J K L
     ⌫
     ⇧ Z X C V B N M
     Done
     Q W E R T Y U I O P
     space return
     123
     A S D F G H J K L
     ⌫
     ⇧ Z X C V B N M
     @ .
     

     View Slide

168. View Slide

169. The Form
     Phone field
     SUBMIT
     |
     Done
     ⌫
     + ❋ #
     2
     1 3
     5
     4 6
     8
     7 9
     0
     ABC
     GHI JKL MNO
     DEF
     TUV
     PQRS WXYZ
     

     View Slide

170. View Slide

171. The Form
     Number field
     SUBMIT
     |
     Done
     1 2 3 4 5 6 7 8 9 0
     space return
     ABC
     ⌫
     #+= . , ? ! ´
     - / : ; ( ) $ & @ "
     

     View Slide

172. View Slide

173. View Slide

174. inputmode
     

     View Slide

175. 66 20 76 Nope
     Chrome Firefox Edge Safari
     Desktop
     Mobile / Tablet
     75 Nope 67 12.2-12.3
     Android Chrome Android Firefox Android iOS Safari
     

     View Slide

176. View Slide

177. 1
     2
     3
     4
     5
     6
     name="field"
     type="text"
     inputmode="number"
     maxlength="9"
     "#
     

     View Slide

178. 1
     2
     3
     4
     5
     6
     name="field"
     type="text"
     inputmode="number" "+ tel, url, email, …
     maxlength="9"
     "#
     

     View Slide

179. 1
     2
     3
     4
     5
     6
     name="field"
     type="text"
     inputmode="decimal"
     maxlength="9"
     "#
     

     View Slide

180. The Form
     Decimal field
     SUBMIT
     |
     Done
     ⌫
     .
     2
     1 3
     5
     4 6
     8
     7 9
     0
     ABC
     GHI JKL MNO
     DEF
     TUV
     PQRS WXYZ
     

     View Slide

181. placeholder
     

     View Slide

182. 1
     2
     3
     4
     5
     name="name"
     type="text"
     placeholder="Your Fullname"
     "#
     

     View Slide

183. REGISTER
     Sign up
     Your email
     Caneco
     

     View Slide

184. Prevent the Dory Syndrome
     

     View Slide

185. REGISTER
     Sign up
     Your email
     Caneco
     Your full name
     

     View Slide

186. REGISTER
     Sign up
     Your full name
     Your email
     Caneco
     The full name must be a valid name.
     Caneco2
     

     View Slide

187. REGISTER
     Sign up
     example@email.com
     Your full name
     Caneco
     Your email
     

     View Slide

188. Now you're ready
     

     View Slide

189. READY TO STRIKE
     

     View Slide

190. But first
     

     View Slide

191. VALIDATE FIRST
     VALIDATE BACK
     NO MERCY
     

     View Slide

192. Thank you
     

     View Slide

193. FORM validation
     #TheLaravelKid
     The Art of
     

     View Slide