django-forms-frontend-validation 1.0.0__py3-none-any.whl

formvalidator/static/webpack/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "webpack",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^5.1.4"
+  }
+}

formvalidator/static/webpack/src/css/style.css

@@ -0,0 +1,42 @@
+/****** Forms ******/
+input, select {
+  font-size: 18px!important;
+}
+
+.errorlist li, .error-msg {
+    color: red;
+}
+
+.error {
+  color: red;
+  font-style: italic;
+}
+
+.error-input {
+  background: #edbabf;
+  border-color: #dc3545;
+}
+
+.error-msg {
+  color: #dc3545;
+  margin-bottom: 0;
+}
+
+.success {
+  color: blue;
+}
+
+.readonly {
+  background-color: #e9ecef;
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+.required-field {
+    font-weight: 800;
+}
+
+.required-field::after {
+  content: " *";
+  color: red;
+}

formvalidator/static/webpack/src/js/formFunctions.js

@@ -0,0 +1,263 @@
+// ########## Getting the csrf token for the fetch calls ##########
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+export const csrftoken = getCookie('csrftoken');
+
+// ##### Fetch Calls #####
+// performs fetch call to view
+export const fetchHandleForm = async (form) => {
+    let formData = new FormData(form);
+    return await fetch(form.action, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: {
+            // "Accept": "m",
+            // "X-Requested-With": "XMLHttpRequest",
+            "X-CSRFToken": csrftoken,
+        },
+        body: formData,
+    }).then(async (response) => {
+        return response.json();
+    });
+}
+// ***** Adding asterisks to labels of required inputs *****
+function addAsterisks(form) {
+    // gathering all inputs
+    let formGroups = document.querySelectorAll(`#${form.id} .form-group`);
+    let inputs = getRequiredFields(formGroups);
+
+    // adding the required-field class which will add the asterisk
+    for (let i = 0; i < inputs.length; i++) {
+        let label = document.querySelector(`label[for=${inputs[i].name}]`);
+        if (inputs[i].required) {
+            label.classList.add("required-field");
+        }
+    }
+}
+
+// In-line validation on required fields
+function validateInputs(form) {
+    // gathering all inputs
+    let formGroups = document.querySelectorAll(`#${form.id} .form-group`);
+    let inputs = getRequiredFields(formGroups);
+
+    // adding listeners to each input for validation
+    for (let i = 0; i < inputs.length; i++) {
+        inputs[i].addEventListener("focusout", () => {
+            if (inputs[i].value === "" || inputs[i].value === null) {
+                addError(inputs[i]);
+            } else {
+                removeError(inputs[i]);
+            }
+        });
+    }
+}
+// validateInputs();
+
+// check form function
+export function checkForm(form) {
+    let errors = false;
+
+    // gathering all inputs
+    let formGroups = document.querySelectorAll(`#${form.id} .form-group`);
+    let inputs = getRequiredFields(formGroups);
+
+    // iterating through all required fields to check for invalidation
+    for (let i = 0; i < inputs.length; i++) {
+        let input = inputs[i];
+        if (input.value === "" || !input.value) {
+            addError(input);
+            errors = true;
+        }
+    }
+
+    return errors
+}
+
+// submit button validation check
+function submitValidation(form) {
+    form.form.addEventListener("submit", (e) => {
+        // preventing default submission behavior
+        e.preventDefault();
+
+        // gathering all inputs
+        let f = e.target;
+        // let formGroups = document.querySelectorAll(`#${form.id} .form-group`);
+        // let inputs = getRequiredFields(formGroups);
+        // // let form = document.getElementById("form") !== null ? document.getElementById("form") : document.getElementById("userForm");
+        let errors = checkForm(f);
+
+        // submitting the form if there aren't any errors
+        if (!errors) {
+            form.form.submit();
+        } else {
+            let invalidInputs = document.getElementsByClassName("validation-error");
+            // scroll to the first invalid input
+            invalidInputs[0].parentElement.scrollIntoView();
+        }
+    });
+}
+
+// adds an error to an input
+function addError(input) {
+    let inputParent = input.parentElement;
+    if (!inputParent.className.includes("form-group")){
+        inputParent = input.parentElement.parentElement;
+    }
+    let errorAdded = inputParent.dataset.errorAdded;
+    inputParent.classList.add("validation-error");
+    input.classList.add("error-input")
+    if (errorAdded === "false" || !errorAdded) {
+        // creating the error message p
+        let eP = document.createElement("p");
+        eP.setAttribute("class", "error-msg");
+        eP.innerText = "This input is required";
+        inputParent.appendChild(eP);
+        inputParent.dataset.errorAdded = "true";
+    }
+}
+
+// removes the error from an input
+function removeError(input) {
+    let inputParent = input.parentElement;
+    if (!inputParent.className.includes("form-group")){
+        inputParent = input.parentElement.parentElement;
+    }
+    let errorAdded = inputParent.dataset.errorAdded;
+    inputParent.classList.remove("validation-error");
+    input.classList.remove("error-input");
+    // removing the error message p
+    if (errorAdded === "true") {
+        inputParent.removeChild(inputParent.lastElementChild);
+        inputParent.dataset.errorAdded = "false";
+    }
+}
+
+// function to get all required input
+function getRequiredFields(formGroups) {
+    let nameList = ["SELECT", "INPUT", "TEXTAREA"];
+    let inputs = [];
+    // let formGroups = document.getElementsByClassName("form-group");
+    for (let i = 0; i < formGroups.length; i++) {
+        let children = formGroups[i].children;
+        for (let j = 0; j < children.length; j++) {
+            if (children[j].tagName === "DIV"){
+                let grandChildren = children[j].children;
+                for (let a = 0; a < grandChildren.length; a++) {
+                    if (nameList.includes(grandChildren[a].tagName)) {
+                        if (grandChildren[a].required) {
+                            inputs.push(grandChildren[a]);
+                        }
+                    }
+                }
+            }
+            else{
+                if (nameList.includes(children[j].tagName)) {
+                    if (children[j].required) {
+                        inputs.push(children[j]);
+                    }
+                }
+            }
+        }
+    }
+    return inputs
+}
+
+// checks if the form will be ignored form validation.
+function getIgnored(form, ignoredClasses) {
+    let isIgnored = false;
+    let classes = form.classList;
+    if (ignoredClasses.length > 0) {
+        classes.forEach((_class) => {
+            if (ignoredClasses.includes(_class)) {
+                isIgnored = true;
+                return isIgnored;
+            }
+        });
+    }
+    return isIgnored
+}
+
+// Checks if the form will be validated.
+function isValidate(form, ignoredClasses) {
+    let enableValidate = true;
+    let classes = form.classList;
+    if (ignoredClasses.length > 0) {
+        classes.forEach((_class) => {
+            if (ignoredClasses.includes(_class)) {
+                enableValidate = false;
+                return enableValidate;
+            }
+        });
+    }
+    return enableValidate
+}
+
+// Confirms if a form will only validate the form on submit, only.
+function getValidateOnlyValidateOnSubmit(form, validateOnlyOnSubmit, enableValidation) {
+    let validateOnSubmit = false;
+    let trueFlags = ["all", "__all__", "*", "true"];
+    if (enableValidation) {
+        let classes = form.classList;
+        if (trueFlags.includes(validateOnlyOnSubmit[0])) {
+            validateOnSubmit = true;
+            return true;
+        }
+        else {
+            classes.forEach((_class) => {
+                if (validateOnlyOnSubmit.includes(_class)) {
+                    validateOnSubmit = true;
+                    return validateOnlyOnSubmit;
+                }
+            });
+        }
+    }
+    return validateOnSubmit;
+}
+
+// adds listener logic to the form
+export function _Initialize(form={}){
+    if (!form.ignored || form.enableValidation) {
+        // add all listeners to each form
+        addAsterisks(form);
+        if (!form.validateOnlyOnSubmit) {
+            validateInputs(form);
+        }
+        if (!form.ignored) {
+            submitValidation(form);
+        }
+    }
+}
+
+// function to initialize forms into a json object
+export function _InitializeForms(formNodes, ignoredFormClasses=[], ignoredValidationClasses=[], validateOnlyOnSubmit){
+    for (let i = 0; i < formNodes.length; i++) {
+        let currentForm = formNodes[i];
+        let ignored = getIgnored(currentForm, ignoredFormClasses);
+        let enableValidation = isValidate(currentForm, ignoredValidationClasses);
+        let validateOnSubmit = getValidateOnlyValidateOnSubmit(currentForm, validateOnlyOnSubmit, enableValidation);
+        let _form = {
+            id: currentForm.id,
+            form: currentForm,
+            ignored: ignored,
+            enableValidation: enableValidation,
+            validateOnlyOnSubmit: validateOnSubmit,
+        }
+
+        // adding form functionality
+        _Initialize(_form);
+    }
+}

formvalidator/static/webpack/src/js/index.js

@@ -0,0 +1,2 @@
+import './formFunctions';
+import '../css/style.css';

formvalidator/static/webpack/webpack.config.js

@@ -0,0 +1,23 @@
+const path = require("path");
+
+module.exports = {
+    mode: "development",
+    entry: {
+        forms: ["./src/css/style.css", "./src/js/formFunctions.js",],
+    },
+    output: {
+        filename: "[name].bundle.js",
+        path: path.resolve(__dirname, "../dist"),
+        library: "fv",
+        libraryTarget: "umd",
+        globalObject: "this",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css/i,
+                use: ["style-loader", "css-loader"],
+            },
+        ],
+    },
+}

formvalidator/templates/base.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+{% load static %}
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}{{ title }}{% endblock %}</title>
+
+    <!-- Bootstrap CDNs -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+
+    {% block extra_head %}{% endblock %}
+</head>
+<body>
+<!-- header -->
+{% include 'includes/header.html' %}
+
+<!-- main content -->
+<div class="container my-3">
+    {% block content %}{% endblock %}
+</div>
+
+{% block extra_js %}{% endblock %}
+
+</body>
+</html>

formvalidator/templates/formvalidator/sample.html

@@ -0,0 +1,51 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block content %}
+	<h3>Sample Form</h3>
+    <hr>
+    <p>
+        Sample form where forms.bundle.js is being added via an HTML <code>&lt;script&gt;</code> tag.
+        Then, the object variable, <code>fv</code>, is being exported and used within another <code>&lt;script&gt;</code> tag.
+    </p>
+    <div id="formDiv">
+        <form id="sampleForm" action="{% url 'sample-form' %}" method="post" novalidate>
+            {% csrf_token %}
+            {% if form.non_field_errors %}
+                {% for error in form.non_field_errors %}
+                {{ error }}
+                {% endfor %}
+            {% endif %}
+
+            {% for field in form %}
+                <div class="form-group mb-3">
+                    <label class="form-label" for="{{ field.name }}">{{ field.label }}</label>
+                    {{ field }}
+                    {% if field.errors %}
+                        {{ field.errors }}
+                    {% endif %}
+                </div>
+            {% endfor %}
+
+            <button class="btn btn-primary btn-lg" type="submit">Submit</button>
+        </form>
+    </div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{% static 'dist/forms.bundle.js' %}"></script>
+<script>
+    // fv is exported from forms.bundle.js
+    window.addEventListener("load", () => {
+        let ignoredClasses = []; // add more classes that represent forms you want this script to ignore.
+        let ignoreValidation = []; // add any form classes that you want to ignore validation
+        let validateOnlyOnSubmit = []; // for hitting all forms make index 0 either __all__, all, * or leave blank for false or use false
+        let forms = document.getElementsByTagName("form");
+        // if (form || userForm) {
+        if (forms.length > 0) {
+            // calling specific functions on all forms
+            fv._InitializeForms(forms, ignoredClasses, ignoreValidation, validateOnlyOnSubmit);
+        }
+    });
+</script>
+{% endblock %}

formvalidator/templates/formvalidator/sample2.html

@@ -0,0 +1,51 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block extra_head %}
+    <script src="https://assets.tucsonaz.gov/share/web/js/forms.bundle.js" crossorigin="anonymous"></script>
+{% endblock %}
+
+{% block content %}
+	<h3>Sample Form 2</h3>
+    <hr>
+    <p>This form only validates when the submit button is clicked.</p>
+    <div id="formDiv">
+        <form id="sampleForm" class="sample-form2" action="{% url 'sample-form2' %}" method="post" novalidate>
+            {% csrf_token %}
+            {% if form.non_field_errors %}
+                {% for error in form.non_field_errors %}
+                {{ error }}
+                {% endfor %}
+            {% endif %}
+
+            {% for field in form %}
+                <div class="form-group mb-3">
+                    <label class="form-label" for="{{ field.name }}">{{ field.label }}</label>
+                    {{ field }}
+                    {% if field.errors %}
+                        {{ field.errors }}
+                    {% endif %}
+                </div>
+            {% endfor %}
+
+            <button class="btn btn-primary btn-lg" type="submit">Submit</button>
+        </form>
+    </div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    // fv (formsvalidator) is exported from forms.bundle.js
+    window.addEventListener("load", () => {
+        let ignoredClasses = {{ form_validator.ignored_classes|safe }}; // add more classes that represent forms you want this script to ignore.
+        let ignoreValidation = {{ form_validator.ignore_validation|safe }}; // add any form classes that you want to ignore validation
+        let validateOnlyOnSubmit = {{ form_validator.validate_only_on_submit|safe }}; // for hitting all forms make index 0 either __all__, all, * or leave blank for false or use false
+        let forms = document.getElementsByTagName("form");
+        // if (form || userForm) {
+        if (forms.length > 0) {
+            // calling specific functions on all forms
+            fv._InitializeForms(forms, ignoredClasses, ignoreValidation, validateOnlyOnSubmit);
+        }
+    });
+</script>
+{% endblock %}

formvalidator/templates/includes/header.html

@@ -0,0 +1,18 @@
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
+    <div class="container">
+        <a class="navbar-brand" href="{% url 'sample-form' %}">Form Validator</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'sample-form' %}">Sample Form</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'sample-form2' %}">Sample Form 2</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>

formvalidator/tests.py

@@ -0,0 +1,21 @@
+from django.test import TestCase
+
+from .form_utils.form_utils import FormsValidator
+
+
+# Create your tests here.
+class GetContextTest(TestCase):
+    def setUp(self):
+        self.form_validator = FormsValidator()
+        self.context = self.form_validator.get_context()
+
+    def test_get_context(self):
+        """Ensuring that the context variable is set correctly"""
+        self.assertEqual(type(self.context), dict, msg="The context variable is not a dictionary datatype")
+
+    def test_context_variables(self):
+        """Tests that the context variables are set correctly"""
+        context_keys = self.context.keys()
+        correct_keys = ["ignored_classes", "ignore_validation", "validate_only_on_submit"]
+        for key in context_keys:
+            self.assertTrue(key in correct_keys, msg=f"The context variable {key} is missing")

formvalidator/urls.py

@@ -0,0 +1,12 @@
+from django.urls import path
+from django.conf import settings
+
+from . import views
+
+urlpatterns = []
+
+if settings.DEBUG:
+    urlpatterns += [
+        path('demo/sample-form/', views.sample, name='sample-form'),
+        path('demo/sample-form2/', views.sample2, name='sample-form2'),
+    ]

formvalidator/views.py

@@ -0,0 +1,54 @@
+from django.shortcuts import render
+
+from .forms import SampleForm
+
+from .form_utils import FormsValidator
+
+
+# Create your views here.
+def sample(request):
+    """
+    Sample form view for demonstration purposes only.
+    Will provide an example of using the forms.bundle.js file as an imported module.
+    Will also not use the settings.py variables.
+    """
+    title = "Form Validator Sample"
+    template = "formvalidator/sample.html"
+
+    if request.method == 'POST':
+        form = SampleForm(request.POST)
+        if form.is_valid():
+            pass
+    else:
+        form = SampleForm()
+
+    context = {
+        "form": form,
+        "title": title,
+    }
+    return render(request, template, context)
+
+
+def sample2(request):
+    """
+    Another sample form view for demonstration purposes only.
+    This demo will show how to use the forms.bundle.js file as a CDN, and using the settings variables
+    for the configuration.
+    """
+    title = "Form Validator Sample 2"
+    template = "formvalidator/sample2.html"
+    form_validator = FormsValidator()
+
+    if request.method == 'POST':
+        form = SampleForm(request.POST)
+        if form.is_valid():
+            pass
+    else:
+        form = SampleForm()
+
+    context = {
+        "form": form,
+        "title": title,
+        "form_validator": form_validator.get_context(),
+    }
+    return render(request, template, context)