resolution for WG-406: radiolist and checklist validation

WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js

@@ -1390,24 +1390,28 @@ const inputChecklist = (key, validation) => {
 		dropdown1.classList.add('dropdown');
 		var dropdownContent = document.createElement('div');
 		dropdownContent.classList.add('dropdown-content');
+		dropdownContent.setAttribute('id',`checklistContainer_${key}`);
 		dropdown1.appendChild(dropdownContent);
 		var isOther = false;
 
 		// Create the checkboxes for each item
-		items.forEach(function(item, index) {
-			if (item.toLowerCase() === "other" || item.toLowerCase() === "others") {
+		items.forEach(function (item, index) {
+			if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
 				isOther = true;
-			} else {
+			}else{
 				var div = document.createElement('div');
 				div.classList.add('checkbox');
 
 				var checkbox = document.createElement('input');
 				checkbox.type = 'checkbox';
-				checkbox.classList.add('checkboxOption');
-				checkbox.name = 'checkboxChoices';
+				checkbox.name = `checkboxChoices_${key}`;
+				checkbox.classList.add("checkboxOption");
 				checkbox.value = item;
-				if (index == 0) checkbox.setAttribute('id', `${key}`);
+				if (index == 0) {
+					checkbox.classList.add("checkboxFirst");
+					checkbox.setAttribute('id', `${key}`);
 
+				}			
 				div.appendChild(checkbox);
 				var label = document.createTextNode(item);
 				div.appendChild(label);
@@ -1415,15 +1419,14 @@ const inputChecklist = (key, validation) => {
 			}
 		})
 		
-		if (isOther) {
+		if(isOther){
 			// Create the checkbox dependent on an input text value
 			var dependentDiv = document.createElement('div');
 			dependentDiv.classList.add('checkbox');
 			var dependentCheckbox = document.createElement('input');
 			dependentCheckbox.type = 'checkbox';
-			checkbox.classList.add('checkboxOption');
-			dependentCheckbox.name = 'checkboxChoices';
-			dependentCheckbox.id = 'checkDP';
+			dependentCheckbox.name = `checkboxChoices_${key}`;
+			dependentCheckbox.classList.add("checkboxOption");
 			dependentCheckbox.value = 'other'; // Set the value here based on the input text
 			dependentDiv.appendChild(dependentCheckbox);
 
@@ -1434,14 +1437,14 @@ const inputChecklist = (key, validation) => {
 			// Initially hide the input text box
 			var inputTextBox = document.createElement('input');
 			inputTextBox.type = 'text';
-			inputTextBox.id = 'dependentTB';
+			inputTextBox.id = `dependentTB_${key}`;
 			inputTextBox.classList.add('checkboxOther');
 			inputTextBox.style.display = 'none';
 			inputTextBox.style.padding = '0px';
 			dropdownContent.appendChild(inputTextBox);
 
 			// Add event listener to the "other" checkbox
-			dependentCheckbox.addEventListener('change', function() {
+			dropdownContent.addEventListener('change', function () {
 				if (dependentCheckbox.checked) {
 					inputTextBox.style.display = 'inline-block';
 				} else {
@@ -1456,6 +1459,16 @@ const inputChecklist = (key, validation) => {
 			});
 		}
 
+		dropdownContent.addEventListener('change', function () {
+			const checkboxButtons = document.getElementsByName(`checkboxChoices_${key}`);
+        	checkboxButtons.forEach(checkbox => {
+            	if (checkbox.checked) {
+                	dropdownContent.classList.remove('input-invalid');
+					dropdownContent.classList.add('input-valid');
+            	}
+        	});
+		});
+
 		return dropdown1;
 	} catch (err) {
 		throw err;
@@ -1480,38 +1493,42 @@ const inputRadiolist = (key, validation) => {
 		dropdown1.classList.add('dropdown');
 		var dropdownContent = document.createElement('div');
 		dropdownContent.classList.add('dropdown-content');
+		dropdownContent.setAttribute('id',`dropdownContainer_${key}`);
 		dropdown1.appendChild(dropdownContent);
 		var isOther = false;
 
 		// Create radio buttons for each item
 		items.forEach((item, index) => {
-			if (item.toLowerCase() === "other" || item.toLowerCase() === "others") {
+			if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
 				isOther = true;
-			} else {
+			}else{
 				var radioDiv = document.createElement('div');
 				radioDiv.classList.add('radio-like-checkbox');
 
 				var radio = document.createElement('input');
 				radio.type = 'radio';
 				radio.name = `radioChoices_${key}`;
-				radio.classList.add('radioOption');
+				radio.classList.add("radioOption");
+				radio.name = `radioChoices_${key}`;
 				radio.value = item;
-				if (index == 0) radio.setAttribute('id', `${key}`);
-
+				if (index == 0) {
+					radio.classList.add('radioFirst');
+					radio.setAttribute('id', `${key}`);
+				}
 				var label = document.createTextNode(item);
 				radioDiv.appendChild(radio);
 				radioDiv.appendChild(label);
 				dropdownContent.appendChild(radioDiv);
 			}
 		});
-		if (isOther) {
+		if (isOther){
 			// Create the radio button dependent on an input text value
 			var dependentDiv = document.createElement('div');
 			dependentDiv.classList.add('radio-like-checkbox');
 			var dependentRadio = document.createElement('input');
 			dependentRadio.type = 'radio';
-			dependentRadio.classList.add('radioOption');
 			dependentRadio.name = `radioChoices_${key}`;
+			dependentRadio.classList.add("radioOption");
 			dependentRadio.value = 'other';
 			dependentDiv.appendChild(dependentRadio);
 
@@ -1521,14 +1538,14 @@ const inputRadiolist = (key, validation) => {
 
 			var inputTextBox = document.createElement('input');
 			inputTextBox.type = 'text';
-			inputTextBox.id = 'dependentTB';
+			inputTextBox.id = `dependentTB_${key}`;
 			inputTextBox.classList.add('radioOther');
 			inputTextBox.style.display = 'none';
 			inputTextBox.style.padding = '0px';
 			dropdownContent.appendChild(inputTextBox);
 
 			// Add event listener to the "other" radio button
-			dependentRadio.addEventListener('change', function() {
+			dropdownContent.addEventListener('change', function () {
 				if (dependentRadio.checked) {
 					inputTextBox.style.display = 'inline-block';
 				} else {
@@ -1536,19 +1553,32 @@ const inputRadiolist = (key, validation) => {
 				}
 			});
 			
-			inputTextBox.addEventListener("input", event => {
+			inputTextBox.addEventListener('change', event => {
 				if (dependentRadio.checked) {
 					dependentRadio.value = event.target.value;
 				}
+				
 			});
 		}
 
+		dropdownContent.addEventListener('change', function () {
+			const radioButtons = document.getElementsByName(`radioChoices_${key}`);
+        	radioButtons.forEach(radio => {
+            	if (radio.checked) {
+                	dropdownContent.classList.remove('input-invalid');
+					dropdownContent.classList.add('input-valid');
+            	}
+        	});
+		});
+
 		return dropdown1;
 	} catch (err) {
 		throw err;
 	}
+
 }
 
+
 /**
  * 
  * @param {*} key
@@ -2195,6 +2225,15 @@ export function clearForm() {
 			closeButtons[i].click();
 		}
 
+		const radioOtherField = document.querySelectorAll('.radioOther');
+		const checkboxOtherField = document.querySelectorAll('.checkboxOther');
+		radioOtherField.forEach(field => {
+			field.style.display = 'none';
+		});
+		checkboxOtherField.forEach(field => {
+			field.style.display = 'none';
+		});
+
 		// Set the selected 'doctype' back
 		const options = docTypeField.options;
 		const { elements } = formElement

WebGde/WebContent/WebGde-Widgets/DataInputWidget/validateInput.js

@@ -47,6 +47,10 @@ export const validateInput = (fieldID, value) => {
             case 'fingerprint':
             case 'file-upload':
                 return validateMedia(validation, fieldID);
+            case 'radiolist':
+                return validateRadio(validation, fieldID);
+            case 'checklist':
+                return validateChecklist(validation, fieldID);
             default:
                 return { valid: false, error: [`Collection of allowed values for field: ${fieldID} not found`]}
         }
@@ -286,14 +290,18 @@ const validateSpecific = (validation, value) => {
 
 /**
  * 
+ * @param {*} validation 
+ *      object containing rules for validating media field.
  * @param {*} fieldID 
  *      Key of input field in schema. Expected to be ID of the element.
  * @returns 
- *      validation of given key in schema
+ *      object containg:
+ *          valid - true if no errors found after validation
+ *          errors - list of errors found during validation
  */
 const validateMedia = (validation, fieldID) => {
     let errors = [];
-    const { mandatory, fieldLength } = validation
+    const { mandatory } = validation
 
     const inputElement = document.getElementById(`${fieldID}_attachedMedia`);
 	if (mandatory && inputElement.files.length === 0) {
@@ -305,6 +313,74 @@ const validateMedia = (validation, fieldID) => {
     };
 }
 
+/**
+ * 
+ * @param {*} validation 
+ *      object containing rules for validating radio list.
+ * @param {*} fieldID 
+ *      Key of input field in schema. Expected to be ID of the element.
+ * @returns 
+ *      object containg:
+ *          valid - true if no errors found after validation
+ *          errors - list of errors found during validation
+ */
+const validateRadio = (validation, fieldID) => {
+    let errors = [];
+    const { mandatory } = validation
+    const radioButtons = document.getElementsByName(`radioChoices_${fieldID}`);
+
+    if (mandatory){
+        let isChecked;
+        radioButtons.forEach(radio => {
+            if (radio.checked) {
+                isChecked = true;
+            }
+        });
+        if (!isChecked) {
+            errors = [...errors, 'No option selected'];
+        }
+    }
+
+    return { 
+        valid: errors.length===0,
+        errors
+    };
+}
+
+/**
+ * 
+ * @param {*} validation 
+ *      object containing rules for validating radio list.
+ * @param {*} fieldID 
+ *      Key of input field in schema. Expected to be ID of the element.
+ * @returns 
+ *      object containg:
+ *          valid - true if no errors found after validation
+ *          errors - list of errors found during validation
+ */
+const validateChecklist = (validation, fieldID) => {
+    let errors = [];
+    const { mandatory } = validation
+    const checkboxButtons = document.getElementsByName(`checkboxChoices_${fieldID}`);
+
+    if (mandatory){
+        let isChecked;
+        checkboxButtons.forEach(checkbox => {
+            if (checkbox.checked) {
+                isChecked = true;
+            }
+        });
+        if (!isChecked) {
+            errors = [...errors, 'No option selected'];
+        }
+    }
+
+    return { 
+        valid: errors.length===0,
+        errors
+    };
+}
+
 export const checkValidValues = (fieldID, value) => {
 	try {
 		const validation = getValidation(fieldID);

WebGde/WebContent/WebGde-Widgets/Submit/XMLWriter/XML_Saver.js

@@ -32,8 +32,9 @@ export async function WriteForm(e,metrics,doctype,section) {
                     continue;
                 }
                 // If the first radio button was found
-                if (fid == 'Radio_List') {
-                    const radioButtons = document.getElementsByName('radioChoices');
+                if (Nodes[i].classList.contains('radioFirst')) {
+                    var key = fid;
+                    const radioButtons = document.getElementsByName(`radioChoices_${key}`);
                     let selectedValue;
                     //check if the value is checked to find the selected value
                     radioButtons.forEach(radio => {
@@ -44,13 +45,14 @@ export async function WriteForm(e,metrics,doctype,section) {
                     });
 
                     fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = selectedValue;
-                    i += radioButtons.length; //increment the number of radio buttons to skip the other radio button inputs.
+                    i += radioButtons.length - 1; //increment the number of radio buttons to skip the other radio button inputs.
                     continue;
                 }
 
                 // If the first checkbox was found
-                if (fid == 'Checkbox_List') {
-                    const checkboxButtons = document.getElementsByName('checkboxChoices');
+                if (Nodes[i].classList.contains('checkboxFirst')) {
+                    var key = fid;
+                    const checkboxButtons = document.getElementsByName(`checkboxChoices_${key}`);
                     let selectedValue = '';
                     let isFirstChecked = true; // Variable to track the first checked checkbox
                     //check each checkbox if it is checked to find the values.
@@ -66,7 +68,7 @@ export async function WriteForm(e,metrics,doctype,section) {
                     });
 
                     fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = selectedValue;
-                    i += checkboxButtons.length ; //increment the number of checkboxes to skip the checkboxes input
+                    i += checkboxButtons.length - 1; //increment the number of checkboxes to skip the checkboxes input
                     continue;
                 }
                 fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value;

WebGde/WebContent/WebGde-Widgets/Submit/submit.js

@@ -35,8 +35,8 @@ export const submitForm = async (e) => {
 			if (type === 'submit') continue
 			if (type === 'file') continue
 			if (type === 'hidden') continue
-			if (id === 'Radio_List' || element.classList.contains('radioOption')) continue 
-            if (id === 'Checkbox_List' || element.classList.contains('checkboxOption')) continue
+			if (element.classList.contains('radioOption') && id.length === 0) continue 
+            if (element.classList.contains('checkboxOption') && id.length === 0) continue
 			if (id === 'DocType') {
 				doctype = element.options[element.selectedIndex].text;
 				continue;
@@ -56,15 +56,27 @@ export const submitForm = async (e) => {
 
 			// Update display of input field if input is not valid
 			if (!valid) {
+				console.log(element);
+				error = true
+				if (type === 'select-one') {
+					continue
+				}
 				if (type === 'button'){
 					const fieldMedia = document.getElementById(`${id}_container`);
 					fieldMedia.classList.remove('input-valid');
 					fieldMedia.classList.add('input-invalid');
 					continue
 				}
-				console.log(element);
-				error = true
-				if (type === 'select-one') {
+				if (type === 'radio'){
+					const radioContainer = document.getElementById(`dropdownContainer_${id}`)
+					radioContainer.classList.remove('input-valid');
+					radioContainer.classList.add('input-invalid');
+					continue
+				}
+				if (type === 'checkbox'){
+					const checkboxContainer = document.getElementById(`checklistContainer_${id}`)
+					checkboxContainer.classList.remove('input-valid');
+					checkboxContainer.classList.add('input-invalid');
 					continue
 				}
 				const field = document.getElementById(id)