django-crispy-forms and HTMX integration #3 - Field validation and the hx-swap-oob attribute

This video extends the form built in the previous video, and includes HTMX-driven field validation. We'll see how to use HTMX attributes on Django Form fields, and how to use the hx-swap-oob attribute to disable the form's submit button when we have validation errors.

We'll also see how to make use of a handy function "as_crispy_field()" form django-crispy-forms. This generates the HTML for a particular field on our form, which we can then swap into the DOM after validation, using HTMX.

▶️ Full Playlist:

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:27 Validating username field
01:00 Adding HTMX attributes to username
01:44 Username validation URL and view
03:51 Generating field with as_crispy_field function
07:07 Trigger filters and modifiers
08:31 Adding subject field validation
11:47 Subject validation URL and view
13:18 Disable button with hx-swap-oob

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #python #htmx

[seydinaoumarsamabaly]

Best Htmx series ever on Youtube 😌. Thank you man. We impatiently are waiting for the next episode 😁🙌!

[tobidegnon]

Thanks so much, I learn so much in this series, I never thought on using crispy forms for more then the basic "crispy" tag

[dominiqueremy]

Thank you so much.
I added default=0 to subject and null=True (date_of_birth) to avoid errors in case of creating a superuser.

[JustinSpryce]

I am loving this ... more HTMX tutorials please

[craigphollingsworth]

Great vid again. Really helpful! Thanks! Would be interesting to see a similar example with a Model choice field . I'm just getting dictionaries showing in the select. anyhoos, will keep playing. Thanks again!

[grabskyyy]

Thanks so much for the entire Django & HTMX series - it had been a huge help! I'm still struggling to find a good way to replace only value attribute of forms input div. My goal is to create a form where HTMX is triggered when user starts typing name (like autocomplete), with a button next to it. When user presses the button, all relevant form inputs should be filled with details like tax number etc. Up to here everything works great. I can do what I want by rendering a partial that targets the particular divs, but to keep the div as initially defined I still need to include the entire HTML in the partials (basically the output of your as_crispy_field from 5:34). How do I only replace the 'value' attribute of that field and can crispy-forms help with that?

[LeandroGurruchaga]

Do hoy know how to make tests for your example of crispy form fields with htmx triggers? Thanks

[isaachatilima]

Hi I am not using Django for my backend but I want to try out HTMX. How do I keep my form validation on submit and only submit if form is valid using htmx?

[myschored]

Hi, I need this HttpResponse without CrispyForms... is posible?

[mitenmehta]

in JSP we used to submit form and get all errors at once and then return all validation errros then instead of realtime how to do ? seems that we have to return full form with all validation errors put in correct place sounds like tedious same as we did in JSP.

[thingknow]

its awesome tutorial. everything will perfect.but i have a doubt.i displayed the form with in the bootstrap modal.the form will be submitted correctly, but the data will not added to the list.can you make a video regarding to the bootstrap modal forms using django-htmx.it will be helpful.thanks.

[DenisCardosoTutor]

This tutorial is so helpful and I´d like to know if there is a way to make a check function that generates a selection box as a crispy field.

[scknylmz]

You are awesome and I am sure that you are not any idea how you encourage us to use htmx also you have no idea how you teach us valuable things. thank you so much again, Even though I know the subject, I learn new things and discover new things :)

[LeandroGurruchaga]

The tree videos are excellent, thanks ! I'll try to apply this approach to a project under development actually with adminlte template with carda on bootstrap .Is important with this package that all the code are un .py's

[andreaszweili]

Do you have a plan to do a video where you create a Modal on top of another form so that you can for example extend a select field while the user is filling out a form?

[mentotong]

Thank you so much for this awesome tutorial, as always. Just one question about this subject, if I have a variable that is not in the htmx form to perform swap, how can we use the hx-swap-oob to update the attribute?

[Razilator]

Hello, these are great tutorials! Very nice to watch!
Can you suggest an extension for vs code that shows the latest commit and edit time?

[Youdude]

Can you do a video on a django-crispy-forms with a modal and htmx integration?