handled error case when no value is selected

public/index.html

@@ -63,7 +63,7 @@
         <div>
           <label for="readerLevel">Reader Level:</label>
           <select class="box-input" id="readerLevel" onchange="readerLevelChangeEvent(event)">
-            <option value="">Select level</option>
+            <option value="0">Select level</option>
             <option value="1">First Year</option>
             <option value="2">Second Year</option>
             <option value="3">Third Year</option>
@@ -74,7 +74,7 @@
         <div>
           <label for="readerCategory">Reader Category:</label>
           <select class="box-input" id="readerCategory" onchange="readerCategoryChangeEvent(event)">
-            <option value="">Select category</option>
+            <option value="0">Select category</option>
             <option value="1">Mixed-ability group</option>
             <option value="2">High-ability group</option>
             <option value="3">Good-ability group</option>

public/index.js

@@ -80,14 +80,14 @@ function isFormValid() {
         document.getElementById('textCharacters-validation').style.display = 'none';
     }
 
-    if (inputObj.readerLevel === '') {
+    if (inputObj.readerLevel === '' || inputObj.readerLevel === 0) {
         invalidFields++;
         document.getElementById('readerLevel-validation').style.display = 'block';
     } else {
         document.getElementById('readerLevel-validation').style.display = 'none';
     }
 
-    if (inputObj.readerCategory === '') {
+    if (inputObj.readerCategory === ''|| inputObj.readerCategory === 0) {
         invalidFields++;
         document.getElementById('readerCategory-validation').style.display = 'block';
     } else {