Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ```js
- const mockServerCall = (delay, getResult) => {
- return new Promise((resolve) => {
- setTimeout(() => resolve(getResult()), delay);
- });
- };
- const form = new Form({
- children: [
- {
- name: 'username',
- validate: validation(
- validation.required(),
- validation.async((value) =>
- mockServerCall(1000, () => value === 'john' ? 'username is taken' : null)))
- },
- {
- name: 'password',
- validate: validation(
- validation.required(),
- validation.validate(
- value => value && value.length < 6 ? 'invalid password' : null,
- {events: ['blur']}))
- }
- ]
- });
- const username = form.get('username');
- const password = form.get('password');
- username.onChange('test'); // initiates call 1 to the server
- console.log(username.hasErrors); // false
- console.log(username.errors); // null
- console.log(password.hasErrors); // false
- console.log(password.errors); // null
- console.log(form.hasErrors); // false
- console.log(form.errors); // null
- username.onChange(''); // no call to the server
- console.log(username.hasErrors); // true
- console.log(username.errors); // ['Required']
- console.log(password.hasErrors); // false
- console.log(password.errors); // null
- console.log(form.hasErrors); // true
- console.log(form.errors); // ['Required']
- password.onChange('123');
- password.onBlur();
- console.log(username.hasErrors); // true
- console.log(username.errors); // ['Required']
- console.log(password.hasErrors); // true
- console.log(password.errors); // ['invalid password']
- console.log(form.hasErrors); // true
- console.log(form.errors); // ['Required', 'invalid password']
- // ... waiting asynchronously
- // a bit later, before response 1 comes from the server (which is ignored anyway)
- console.log(username.hasErrors); // true
- console.log(username.errors); // ['Required']
- console.log(password.hasErrors); // true
- console.log(password.errors); // ['invalid password']
- console.log(form.hasErrors); // true
- console.log(form.errors); // ['Required', 'invalid password']
- username.onChange('andrew'); // initiates call 2 to the server
- console.log(username.hasErrors); // false
- console.log(username.errors); // null
- console.log(password.hasErrors); // true
- console.log(password.errors); // ['invalid password']
- console.log(form.hasErrors); // false, because it waits for the async validated child
- console.log(form.errors); // null
- username.onChange('john'); // initiates call 3 to the server
- // ... waiting asynchronously
- // later after response 3 comes from the server (response 2 is ignored).
- console.log(username.hasErrors); // true
- console.log(username.errors); // ['username is taken']
- console.log(password.hasErrors); // true
- console.log(password.errors); // ['invalid password']
- console.log(form.hasErrors); // true
- console.log(form.errors); // ['username is taken', 'invalid password']
- ```
Add Comment
Please, Sign In to add comment