Improve form validation and submission logic; ensure fields are trimmed and reset correctly

Author: Alex-Os-Dev-Lab

debugging/book-library/script.js

@@ -28,20 +28,38 @@ 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 === "" ||
-    !check.checked //if the checkbox is not checked, it will be false, so we need to check if its not checked
-  ) {
-    alert("Please fill all fields!");
+  
+ // 1. Preprocess and store cleaned values in variables / removes spaces from the beginning and end
+  const cleanTitle = title.value.trim();
+  const cleanAuthor = author.value.trim();
+  
+  // Convert string input to a Number for calculation/validation
+  const pageCount = Number(pages.value); 
+  const isRead = check.checked;
+
+  // 2. VALIDATION: // Check if strings are empty after trimming spaces
+  if (cleanTitle === "" || cleanAuthor === "") {
+    alert("Title and Author cannot be empty!");
+    return false;
+  }
+  // Check if page count is a valid number and greater than 0
+  if (isNaN(pageCount) || pageCount <= 0) {
+    alert("Please enter a valid number of pages!");
     return false;
-  } else {
-    let book = new Book(title.value, author.value, pages.value, check.checked);
-    myLibrary.push(book);
+  }
+
+  // 3. If all validations pass, create a new Book object and add it to the library
+  let book = new Book(cleanTitle, cleanAuthor, pageCount, isRead);
+  myLibrary.push(book);
+
+  // 4. Clear the form fields after submission
+    title.value = "";
+    author.value = "";
+    pages.value = "";
+    check.checked = false;
+  
     render();
   }
-}
 
 class Book {
   constructor(title, author, pages, check) {
@@ -68,9 +86,9 @@ function render() {
     let pagesCell = row.insertCell(2);
     let wasReadCell = row.insertCell(3);
     let deleteCell = row.insertCell(4);
-    titleCell.innerHTML = myLibrary[i].title;
-    authorCell.innerHTML = myLibrary[i].author;
-    pagesCell.innerHTML = myLibrary[i].pages;
+    titleCell.textContent = myLibrary[i].title;
+    authorCell.textContent = myLibrary[i].author;
+    pagesCell.textContent = myLibrary[i].pages;
 
     //add and wait for action for read/unread button
     let changeBut = document.createElement("button");