Add form validation for title and description

Chirag-And-Dheeraj · Jul 7, 2024 · 9d44c8f · 9d44c8f
1 parent 926b3b1
commit 9d44c8f
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 44 deletions.
diff --git a/client/upload.html b/client/upload.html
@@ -25,35 +25,49 @@
     </header>
     <main>
       <h1 class="page-title special-red">Upload</h1>
-      <section id="file-form">
-        <label for="title">Title</label>
-        <input
-          id="title"
-          type="text"
-          name="title"
-          placeholder="The Fast and The Furious"
-        />
-        <label class="block" for="description">Description</label>
-        <textarea
-          id="description"
-          type="text"
-          name="description"
-          placeholder="A movie about car racing."
-        ></textarea>
-        <label for="video">Drop that video...</label>
-        <input id="video" type="file" name="video" accept=".mp4" />
-        <br />
-
-        <p id="error" class="special-red" style="display: none;"></p>
-
-        <br />
-
-        <!-- <label for="thumbnail">Thumbnail</label>
-        <input id="thumbnail" type="file" name="thumbnail" accept="image/*" /> -->
-        <br />
-        <button id="uploadVideoButton">Submit</button>
-
-        <div id="divOutput"></div>
+      <section id="form-section">
+        <form id="file-form">
+          <label for="title">Title</label>
+          <input
+            id="title"
+            type="text"
+            name="title"
+            placeholder="The Fast and The Furious"
+            required
+          />
+          <br />
+
+          <p id="titleError" class="special-red" style="display: none;"></p>
+
+          <br />
+          <label class="block" for="description">Description</label>
+          <textarea
+            id="description"
+            type="text"
+            name="description"
+            placeholder="A movie about car racing."
+            required
+          ></textarea>
+          <br />
+
+          <p id="descriptionError" class="special-red" style="display: none;"></p>
+
+          <br />
+          <label for="video">Drop that video...</label>
+          <input id="video" type="file" name="video" accept=".mp4" />
+          <br />
+
+          <p id="fileError" class="special-red" style="display: none;"></p>
+
+          <br />
+
+          <!-- <label for="thumbnail">Thumbnail</label>
+          <input id="thumbnail" type="file" name="thumbnail" accept="image/*" /> -->
+          <br />
+          <button id="uploadVideoButton" type="submit">Submit</button>
+
+          <div id="divOutput"></div>
+        </form>
       </section>
     </main>
     <script src="../static/upload.js"></script>

diff --git a/static/style.css b/static/style.css
@@ -148,3 +148,7 @@ main section textarea,
   margin: 1.5em;
 }
 
+#form-section {
+  display: block;
+}
+
diff --git a/static/upload.js b/static/upload.js
@@ -1,26 +1,43 @@
-const uploadVideoButton = document.getElementById("uploadVideoButton");
+const fileForm = document.getElementById("file-form");
 const divOutput = document.getElementById("divOutput");
 const video = document.getElementById("video");
-const title = document.getElementById("title");
-const description = document.getElementById("description");
-const error = document.getElementById("error");
+const titleElement = document.getElementById("title");
+const descriptionElement = document.getElementById("description");
+const fileError = document.getElementById("fileError");
+const titleError = document.getElementById("titleError");
+const descriptionError = document.getElementById("descriptionError");
+
+fileForm.addEventListener("submit", (e) => {
+    e.preventDefault()
+
+    const title = titleElement.value;
+    const description = descriptionElement.value;
+    const regex = /^[a-zA-Z0-9\s\-_',.!&():]+$/
+
+    if(!regex.test(title)) {
+        titleError.textContent = "Invalid Title";
+        titleError.style.display = "block";
+        return;
+    }
+
+    if(!regex.test(description)) {
+        descriptionError.textContent = "Invalid Description";
+        descriptionError.style.display = "block";
+        return;
+    }
 
-uploadVideoButton.addEventListener("click", () => {
-    console.log(title.value);
-    console.log(description.value);
-    console.log("Read and upload button hit!");
     const fileReader = new FileReader();
     const theFile = video.files[0];
-
-    console.log(theFile.type);
-    const type = theFile.type;
+    const type = theFile.type
     if(type !== "video/mp4") {
-        error.textContent = "Only .mp4 files are supported";
-        error.style.display = "block";
+        fileError.textContent = "Only .mp4 files are supported";
+        fileError.style.display = "block";
         return;
     }
 
-    error.style.display = "none";
+    titleError.style.display = "none";
+    descriptionError.style.display = "none";
+    fileError.style.display = "none";
 
     fileReader.onload = async (ev) => {
         const CHUNK_SIZE = 20000000;

diff --git a/utils/util.go b/utils/util.go
@@ -159,7 +159,6 @@ func UploadToAppwrite(folderName string, db *sql.DB) {
 			log.Fatal(err)
 		}
 		defer response.Body.Close()
-		log.Println(response.StatusCode)
 		if response.StatusCode != 201 {
 			body, err := io.ReadAll(response.Body)
 			if err != nil {