mark empty inputs always

questionary.js

@@ -2,14 +2,11 @@
 // @name         Runcity Questionary
 // @namespace    http://tampermonkey.net/
 // @version      2024-11-18
-// @description  Prettify pages & store data on server
+// @description  Add red border for empty inputs
 // @author       You
 // @match        https://www.runcity.org/ru/events/*/online/
 // @icon         https://www.google.com/s2/favicons?sz=64&domain=runcity.org
 // @grant        none
-// @require https://code.jquery.com/jquery-3.7.1.min.js
-// @require https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js
-// @require https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js
 // ==/UserScript==
 
 (function () {
@@ -17,48 +14,6 @@
 
   /* COPY FROM MAIN */
 
-  class Tag {
-    static make(name, params) {
-      let element = document.createElement(name)
-      for (const [name, value] of Object.entries(params)) {
-        if (name == "on") {
-          for (const [event, listener] of Object.entries(value)) {
-            element.addEventListener(event, listener)
-          }
-        }
-        else if (name == "classes") {
-          element.classList.add(...value.split(" "))
-        }
-        else if (name == "children") {
-          element.append(...value)
-        }
-        else if (name.startsWith("_")) {
-          element.setAttribute(name.substring(1), value)
-        }
-        else
-          element[name] = value
-      }
-
-      return element
-    }
-
-    static div(params) {
-      return this.make("div", params)
-    }
-
-    static span(params) {
-      return this.make("span", params)
-    }
-
-    static button(params) {
-      return this.make("button", params)
-    }
-
-    static input(params) {
-      return this.make("input", params)
-    }
-  }
-
   function addStylesToHead(styles) {
     let styleSheet = document.createElement("style")
     styleSheet.textContent = styles
@@ -67,52 +22,32 @@
 
   /* END COPY FROM MAIN */
 
-  function addEmptyCheckForSubmitButton() {
-    let saveButton = document.querySelector(`.check-answers-saved`)
-    let inputs = document.querySelectorAll(`input.cp_team_answer`)
+  function addClassIfEmptyInput(input) {
+    if (input.value.trim() == "") {
+      input.classList.add("empty-input")
+    }
+    else {
+      input.classList.remove("empty-input")
+    }
+  }
 
-    inputs.forEach(el => el.addEventListener("focus", e => el.classList.remove("empty-input")))
+  function addEmptyInputCheck() {
+    let inputs = [...document.querySelectorAll(`input.cp_team_answer`)]
 
-    let pseudoSaveButton = Tag.div({
-      id: "pseudo-save",
-      on: {
-        click: function (e) {
-          e.stopPropagation()
+    for (const input of inputs) {
+      addClassIfEmptyInput(input)
 
-          let canSend = true
-          for (const input of inputs) {
-            if (input.value.trim() == "") {
-              input.classList.add("empty-input")
-              canSend = false
-            }
-          }
-
-          if (canSend) {
-            saveButton.click()
-          }
-        }
-      }
-    })
-    saveButton.append(pseudoSaveButton)
+      input.addEventListener("input", e => {
+        addClassIfEmptyInput(input)
+      })
+    }
 
     addStylesToHead(`
-      .check-answers-saved {
-        position: relative;
-
-        #pseudo-save {
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-        }
-      }
-
       .empty-input {
         border-color: red !important;
       }
     `)
   }
 
-  addEmptyCheckForSubmitButton()
+  addEmptyInputCheck()
 })();