Vuejs Forms Part 7 Validation, event bubbling, setCustomValidity, pattern, conditional CSS
Part 7 Explores Form Validation. Form validation is done against a PHP validating echo server. The pattern attribute and setCustomValidity are used to validate data before being sent to the server.
https://github.com/drybro/vue-form
00:00 Intro
00:20 Add warning after user enters field.
01:32 Use the focusin event to add a CSS class
02:14 Use event bubbling to apply CSS addition to all form elements.
03:16 Review validation from part 6.
03:40 Browser enforced required field.
04:34 Use pattern="reg" attribute to format input data.
05:40 Input event with setCustomValidity and patternMismatch
08:10 Deselect optional radio and single select tags.
11:00 Use valid default data for completed tags.
11:38 View server code to find next error to catch.
11:58 Tag name that handles multiple data requires [] postfix.
12:52 Validation browser defined error flags.
14:10 Use Vue.js watch to manage custom error flag.
16:16 Use Vue.js ref="refname" attribute with setCustomValidity.
18:35 Conditional CSS :class={'CSSName': flag}
20:22 Conditional Error message for checkbox fieldset
21:36 Catch custom error flag to prevent submission.
23:14 Closing remarks
On this page of the site you can watch the video online Vuejs Forms Part 7 Validation, event bubbling, setCustomValidity, pattern, conditional CSS with a duration of hours minute second in good quality, which was uploaded by the user Coding Tips 31 January 2024, share the link with friends and acquaintances, this video has already been watched 43 times on youtube and it was liked by 0 viewers. Enjoy your viewing!
