Form validation with htmx

Live demo: https://hypecp.com/demos/htmx-validation
Design: https://basecoatui.com

We are starting with a pure html form web 1.0 form submit and converting it into a validate-as-you-type dynamic user experience with 100% htmx (no other front-end library).

We use the original server validation rules at each step to let the user know where they are as they fill out the form.

Chapters:
00:00 Intro and demo of the final result
00:55 Pure html form
03:05 The problem with the web 1.0 experience
04:20 Validation function & errors array
05:24 Adding the htmx
06:38 Disabling the button on submit
08:09 Adding a loading spinner on submit
09:10 How we will handle the validation
11:40 Why we will use hx-swap-oob
13:33 Adding ids to our phrases
17:36 Name field validation logic
19:55 SSN field logic
20:38 Race conditions with hx-sync
23:57 Create Password field
25:53 What we lost switching it to htmx
27:33 Re-adding validation on form submit
28:54 Do we want to block submission?
31:15 Html inputs "required" & "pattern"

32:35 LEGALLY REQUIRED NOTICE REGARDING ZDATE:
The 4 flagged confidentiality violations are:
05:00 SSN requirement
20:00 SSN verify and lookup
24:30 Password searching
25:20 User lookup by password
ZDate is not a real service and should not be implemented as described and demonstrated in the video.

Видео Form validation with htmx канала hypermedia-tv