fix: enhance form validation and submission handling

Author: jakr-s

debugging/book-library/index.html

@@ -26,13 +26,15 @@ <h1>Library</h1>
     </button>
 
     <div id="demo" class="collapse">
-      <div class="form-group">
+      <form id="book-form" class="form-group">
         <label for="title">Title:</label>
         <input
           type="text"
           class="form-control"
           id="title"
           name="title"
+          pattern=".*\S.*"
+          title="Please enter a valid title (not just spaces)"
           required
         />
         <label for="author">Author: </label>
@@ -41,6 +43,8 @@ <h1>Library</h1>
           class="form-control"
           id="author"
           name="author"
+          pattern=".*\S.*"
+          title="Please enter a valid author (not just spaces)"
           required
         />
         <label for="pages">Pages:</label>
@@ -49,6 +53,7 @@ <h1>Library</h1>
           class="form-control"
           id="pages"
           name="pages"
+          min="1"
           required
         />
         <label class="form-check-label">
@@ -59,13 +64,8 @@ <h1>Library</h1>
             value=""
           />Read
         </label>
-        <input
-          type="submit"
-          value="Submit"
-          class="btn btn-primary"
-          onclick="submit()"
-        />
-      </div>
+        <button type="submit" class="btn btn-primary">Submit</button>
+      </form>
     </div>
 
     <table class="table" id="display">

debugging/book-library/script.js

@@ -1,8 +1,13 @@
 let myLibrary = [];
 
-window.addEventListener("load", function (e) {
+document.addEventListener("DOMContentLoaded", (e) => {
   populateStorage();
   render();
+  const form = document.getElementById("book-form");
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    submit();
+  });
 });
 
 function populateStorage() {
@@ -24,17 +29,11 @@ const author = document.getElementById("author");
 const pages = document.getElementById("pages");
 const check = document.getElementById("check");
 
-//check the right input from forms and if its ok -> add the new book (object in array)
-//via Book function and start render function
 function submit() {
-  if (!title.value || !author.value || pages.value <= 0) {
-    alert("Please fill all fields!");
-    return false;
-  } else {
-    let book = new Book(title.value, author.value, pages.value, check.checked);
-    myLibrary.push(book);
-    render();
-  }
+  // Validation is now handled client side in the html
+  let book = new Book(title.value, author.value, pages.value, check.checked);
+  myLibrary.push(book);
+  render();
 }
 
 function Book(title, author, pages, check) {