Skip to content

W
web-ui
Commit d7fa8c53 by Owen Ryan Ang
Options

resolution for WG-406: radiolist and checklist validation

parent f7376321
Showing with 168 additions and 39 deletions
WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js
......@@ -1390,58 +1390,61 @@ 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);
dropdownContent.appendChild(div)
}
})
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);
var dependentLabel = document.createTextNode('other');
dependentDiv.appendChild(dependentLabel);
dropdownContent.appendChild(dependentDiv);
// 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,34 +1538,47 @@ 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 {
inputTextBox.style.display = 'none'; // Hide the input text box when "other" radio button is unchecked
}
});
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
......@@ -46,7 +46,11 @@ export const validateInput = (fieldID, value) => {
case 'video-capture':
case 'fingerprint':
case 'file-upload':
return validateMedia(validation, fieldID);
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)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment