Toast

project/main/templates/main/base/base.html

@@ -5,6 +5,7 @@
     <meta name="viewport"
           content="width=100%, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
     <title>{{ title or "Django-html demo" }}</title>
 </head>

project/main/templates/main/components/toast.html

@@ -0,0 +1,9 @@
+{% macro toast(title, id) %}
+    <div class="toast-container position-absolute top-0 start-50 translate-middle-x mt-2">
+        <div id="{{ id }}" class="toast text-bg-success">
+            <div class="toast-body">
+                {{ title }}
+            </div>
+        </div>
+    </div>
+{% endmacro %}

project/main/templates/main/form_validation.html

@@ -1,19 +1,34 @@
 {% extends "main/base/layout.html" %}
+{% from "main/components/toast.html" import toast %}
 
 
 {% block content %}
-	<form
+    <form
-		hx-post="{{ url("form-validation") }}"
+        hx-post="{{ url("form-validation") }}"
-		hx-target="#validation-form-content"
+        hx-target="#validation-form-content"
-		hx-swap="outerHTML"
+        hx-swap="outerHTML"
-	>
+    >
-		<div class="card p-4">
+        <div class="card p-4">
-			{% include "main/form_validation_content.html" %}
+            {% include "main/form_validation_content.html" %}
-			<div class="d-flex">
+            <div class="d-flex">
-				<button type="submit" class="btn btn-success ms-auto">
+                <button type="submit" class="btn btn-success ms-auto">
-					Submit
+                    Submit
-				</button>
+                </button>
-			</div>
+            </div>
-		</div>
+        </div>
-	</form>
+    </form>
+
+    {{ toast(title="Form validated and saved successfully", id="toast-success") }}
+
+
+    <script>
+        let toastSuccess = null;
+
+        document.addEventListener("DOMContentLoaded", function () {
+            const toastElement = document.querySelector("#toast-success");
+            toastSuccess = new bootstrap.Toast(toastElement, {
+                delay: 3000,
+            })
+        });
+    </script>
 {% endblock %}

project/main/templates/main/form_validation_content.html

@@ -57,3 +57,10 @@
         {% endif %}
     </div>
 </div>
+
+
+{% if validation.is_valid %}
+    <script>
+        toastSuccess.show();
+    </script>
+{% endif %}

project/main/views/form_validation.py

@@ -11,6 +11,7 @@ from project.main.views.demo_view_base import DemoViewBase
 @dataclass
 class Validation:
     validated: bool = False
+    is_valid: bool = False
 
     name: Optional[str] = None
     consent: Optional[bool] = None
@@ -57,6 +58,10 @@ class FormValidationView(DemoViewBase):
         if not validation.consent:
             validation.consent_error = "You should consent"
 
+        validation.is_valid = not (
+            validation.name_error or validation.age_error or validation.consent_error
+        )
+
         return render(
             context={
                 "validation": validation,