Guest User

Untitled

a guest
Jul 29th, 2018
115
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.80 KB | None | 0 0
  1. ```js
  2. const mockServerCall = (delay, getResult) => {
  3. return new Promise((resolve) => {
  4. setTimeout(() => resolve(getResult()), delay);
  5. });
  6. };
  7.  
  8. const form = new Form({
  9. children: [
  10. {
  11. name: 'username',
  12. validate: validation(
  13. validation.required(),
  14. validation.async((value) =>
  15. mockServerCall(1000, () => value === 'john' ? 'username is taken' : null)))
  16. },
  17. {
  18. name: 'password',
  19. validate: validation(
  20. validation.required(),
  21. validation.validate(
  22. value => value && value.length < 6 ? 'invalid password' : null,
  23. {events: ['blur']}))
  24. }
  25. ]
  26. });
  27.  
  28. const username = form.get('username');
  29. const password = form.get('password');
  30.  
  31. username.onChange('test'); // initiates call 1 to the server
  32.  
  33. console.log(username.hasErrors); // false
  34. console.log(username.errors); // null
  35. console.log(password.hasErrors); // false
  36. console.log(password.errors); // null
  37. console.log(form.hasErrors); // false
  38. console.log(form.errors); // null
  39.  
  40. username.onChange(''); // no call to the server
  41.  
  42. console.log(username.hasErrors); // true
  43. console.log(username.errors); // ['Required']
  44. console.log(password.hasErrors); // false
  45. console.log(password.errors); // null
  46. console.log(form.hasErrors); // true
  47. console.log(form.errors); // ['Required']
  48.  
  49. password.onChange('123');
  50. password.onBlur();
  51.  
  52. console.log(username.hasErrors); // true
  53. console.log(username.errors); // ['Required']
  54. console.log(password.hasErrors); // true
  55. console.log(password.errors); // ['invalid password']
  56. console.log(form.hasErrors); // true
  57. console.log(form.errors); // ['Required', 'invalid password']
  58.  
  59. // ... waiting asynchronously
  60. // a bit later, before response 1 comes from the server (which is ignored anyway)
  61.  
  62. console.log(username.hasErrors); // true
  63. console.log(username.errors); // ['Required']
  64. console.log(password.hasErrors); // true
  65. console.log(password.errors); // ['invalid password']
  66. console.log(form.hasErrors); // true
  67. console.log(form.errors); // ['Required', 'invalid password']
  68.  
  69. username.onChange('andrew'); // initiates call 2 to the server
  70.  
  71. console.log(username.hasErrors); // false
  72. console.log(username.errors); // null
  73. console.log(password.hasErrors); // true
  74. console.log(password.errors); // ['invalid password']
  75. console.log(form.hasErrors); // false, because it waits for the async validated child
  76. console.log(form.errors); // null
  77.  
  78. username.onChange('john'); // initiates call 3 to the server
  79.  
  80. // ... waiting asynchronously
  81. // later after response 3 comes from the server (response 2 is ignored).
  82.  
  83. console.log(username.hasErrors); // true
  84. console.log(username.errors); // ['username is taken']
  85. console.log(password.hasErrors); // true
  86. console.log(password.errors); // ['invalid password']
  87. console.log(form.hasErrors); // true
  88. console.log(form.errors); // ['username is taken', 'invalid password']
  89. ```
Add Comment
Please, Sign In to add comment