fixed first field focus

Web-GDE/script.js

@@ -30,9 +30,9 @@ function validateForm() {
     if(windowWidth >= reqWindowWidth && windowHeight >= reqWindowHeight &&  browser == reqBrowser){
             for (let i = 0; i < credObj.length; i++) {
             // console.log(credObj[i].username + " " + credObj[i].password);
-            if ((un == credObj[i].username) && (pw == credObj[i].password)) {
-                sessionStorage.setItem('user_id', un);
+            if ((un == credObj[i].username) && (pw == credObj[i].password)) {               
                 window.location = "index.html";
+                sessionStorage.setItem('user_id', un);
                 return false;              
             }
             else {

Web-GDE/src/getFields/getFields.js

@@ -17,27 +17,27 @@
  * @returns 
  */
 
- let getSection;
+let getSection;
 const displayFields = async (parentID) => {
     try {
 
         const div = document.getElementById(parentID)
-        if(!div) return { valid: false, error: `Element with ID '${parentID}' not found` }
+        if (!div) return { valid: false, error: `Element with ID '${parentID}' not found` }
 
         clearFields(parentID)                                                       // make sure input fields are clear
-        
+
         await fetchSchema()
 
         const { SECTION } = schema
-        getSection =  SECTION ;
+        getSection = SECTION;
         const { valid, error } = validateSchema()
 
-        if(!valid){
+        if (!valid) {
             div.textContent = error
             div.style.color = '#ff3333'
         }
 
-        for(const key in SECTION) {
+        for (const key in SECTION) {
             const { fieldLabel } = SECTION[key]
             const validation = getValidation(key)
 
@@ -49,18 +49,18 @@ const displayFields = async (parentID) => {
             labelContainer.setAttribute('class', 'labelContainer')
             newField.appendChild(labelContainer)
 
-            const label = document.createElement('label')                           
+            const label = document.createElement('label')
             label.textContent = fieldLabel ? fieldLabel : `Missing label`
             label.style.color = fieldLabel ? '#000000' : '#ff3333'
             labelContainer.appendChild(label)
-            
+
             const inputContainer = document.createElement('div')                    // input field
             inputContainer.setAttribute('class', 'inputContainer')
             newField.appendChild(inputContainer)
 
             let input
 
-            switch(fieldLabel && validation && validation.collection) {
+            switch (fieldLabel && validation && validation.collection) {
                 case 'alphanumeric':
                 case 'alphabet':
                     input = inputString(key, validation)
@@ -84,24 +84,21 @@ const displayFields = async (parentID) => {
             inputContainer.appendChild(input)
         }
 
-        window.onload = function() {
-            document.getElementById("Surname").focus();
-        }
-
         const submit = document.createElement('input')
         submit.type = 'submit'
         div.appendChild(submit)
 
         // add handler event handler for dropdown
         // separate handler is used to fit with the library used 'select2'
-        $(document).ready(function() {
+        $(document).ready(function () {
             const dropdowns = $('.dropdown-input').select2();
             dropdowns.on('select2:open', () => {
                 document.querySelector('.select2-search__field').focus();
-              });
+            });
             dropdowns.on('select2:close', handleDropdown)
         })
-    } catch(err) {
+
+    } catch (err) {
         console.log(err)
         return { valid: false, error: err }
     }
@@ -121,9 +118,9 @@ const noValidation = (key) => {
         input.setAttribute('id', `${key}`)
         input.setAttribute('placeholder', 'Invalid field!')
         input.setAttribute('disabled', 'true')
-        
+
         return input
-    } catch(err) {
+    } catch (err) {
         throw err
     }
 }
@@ -152,7 +149,7 @@ const inputString = (key, validation) => {
         mandatory ? input.setAttribute('required', 'true') : null
 
         return input
-    } catch(err) {
+    } catch (err) {
         throw err
     }
 }
@@ -170,7 +167,7 @@ const inputString = (key, validation) => {
 const inputNumeric = (key, validation) => {
     try {
         const { mandatory, fieldLength } = validation
-        
+
         const input = document.createElement('input')
         input.setAttribute('id', `${key}`)
         input.setAttribute('type', 'text')
@@ -182,7 +179,7 @@ const inputNumeric = (key, validation) => {
         mandatory ? input.setAttribute('required', 'true') : null
 
         return input
-    } catch(err) {
+    } catch (err) {
         throw err
     }
 }
@@ -209,7 +206,7 @@ const inputDate = (key, validation) => {
         mandatory ? input.setAttribute('required', 'true') : null
 
         return input
-    } catch(err) {
+    } catch (err) {
         throw err
     }
 }
@@ -232,25 +229,25 @@ const inputDropdown = (key, validation) => {
         input.classList.add('dropdown-input')
         input.addEventListener('focusout', handleInput)
 
-        input.addEventListener('keydown', function(event) {
+        input.addEventListener('keydown', function (event) {
             if (event.keyCode == 9) {
-              event.preventDefault();
-              var elem = document.getElementsByClassName('select2-search__field');
-              elem.focus();
+                event.preventDefault();
+                var elem = document.getElementsByClassName('select2-search__field');
+                elem.focus();
             }
-          });
+        });
 
-        if(options && options.length>0) {
+        if (options && options.length > 0) {
             newOption = document.createElement("option")
             newOption.text = 'Choose an option'
             newOption.value = null
-            
+
             input.add(newOption)
-            for(const option of options) {
+            for (const option of options) {
                 newOption = document.createElement("option")
                 newOption.text = option
                 newOption.value = option
-                
+
                 input.add(newOption)
             }
         }
@@ -258,12 +255,12 @@ const inputDropdown = (key, validation) => {
             newOption = document.createElement("option")
             newOption.text = 'No option available'
             newOption.value = null
-            
+
             input.add(newOption)
             input.setAttribute('disabled', 'false')
         }
         return input
-    } catch(err) {
+    } catch (err) {
         throw err
     }
 }
@@ -274,18 +271,18 @@ const inputDropdown = (key, validation) => {
  * @param {*} event 
  */
 const handleInput = (event) => {
-    const { id, value, style} = event.target
+    const { id, value, style } = event.target
     try {
         const validation = validateInput(id, value)
 
-        if(!validation.valid) {
+        if (!validation.valid) {
             event.target.classList.remove('input-valid')
             event.target.classList.add('input-invalid')
         } else {
             event.target.classList.remove('input-ivalid')
             event.target.classList.add('input-valid')
         }
-    } catch(err) {
+    } catch (err) {
         throw err
     }
 }
@@ -314,7 +311,7 @@ const handleDropdown = (event) => {
 
         const validation = validateInput(id, value)
 
-        if(!validation.valid) {
+        if (!validation.valid) {
             $(`#${id}`).select2({
                 selectionCssClass: 'input-invalid'
             })
@@ -323,7 +320,7 @@ const handleDropdown = (event) => {
                 selectionCssClass: 'input-valid'
             })
         }
-    } catch(err) {
+    } catch (err) {
         throw err
     }
 }
@@ -335,10 +332,12 @@ const handleDropdown = (event) => {
  *      id of element containing the input fields
  */
 const clearFields = (elementID) => {
-    try{
+    try {
         const element = document.getElementById(elementID)
         element.innerHTML = ''
-    } catch(err) {
+    } catch (err) {
         throw err
     }
-}
\ No newline at end of file
+}
+
+