Form validation

project/main/templates/main/form_validation.html

@@ -2,7 +2,18 @@
 
 
 {% block content %}
-    <p>
-        This is some form validation content bellow.
-    </p>
+	<form
+		hx-post="{{ url("form-validation") }}"
+		hx-target="#validation-form-content"
+		hx-swap="outerHTML"
+	>
+		<div class="card p-4">
+			{% include "main/form_validation_content.html" %}
+			<div class="d-flex">
+				<button type="submit" class="btn btn-success ms-auto">
+					Submit
+				</button>
+			</div>
+		</div>
+	</form>
 {% endblock %}

project/main/templates/main/form_validation_content.html

@@ -0,0 +1,59 @@
+<div id="validation-form-content">
+    <div class="row">
+        <div class="col">
+            <div class="mb-3">
+                <label for="validation-form-number" class="form-label">Enter name, length 3..10</label>
+                <input
+                    type="text"
+                    class="form-control {{ conditional_cls({
+                        "is-invalid": validation.name_error,
+                        "is-valid": validation.validated and not validation.name_error,
+                    }) }}"
+                    name="name"
+                    id="validation-form-number"
+                    value="{{ validation.name | default_if_none("") }}"
+                />
+                {% if validation.name_error %}
+                    <div class="invalid-feedback">{{ validation.name_error }}</div>
+                {% endif %}
+            </div>
+        </div>
+        <div class="col">
+            <div class="mb-3">
+                <label for="validation-form-number" class="form-label">Enter age, 1..100</label>
+                <input
+                    type="text"
+                    class="form-control {{ conditional_cls({
+                        "is-invalid": validation.age_error,
+                        "is-valid": validation.validated and not validation.age_error,
+                    }) }}"
+                    name="age"
+                    id="validation-form-number"
+                    value="{{ validation.age | default_if_none("") }}"
+                />
+                {% if validation.age_error %}
+                    <div class="invalid-feedback">{{ validation.age_error }}</div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch">
+        <input
+            class="form-check-input {{ conditional_cls({
+                "is-invalid": validation.consent_error,
+                "is-valid": validation.validated and not validation.consent_error,
+            }) }}"
+            type="checkbox"
+            name="consent"
+            id="consent-checkbox"
+            {% if validation.consent %}checked{% endif %}
+        >
+        <label class="form-check-label" for="consent-checkbox">
+            I consent to use this data for what ever you want
+        </label>
+        {% if validation.consent_error %}
+            <div class="invalid-feedback">{{ validation.consent_error }}</div>
+        {% endif %}
+    </div>
+</div>