fixed a bug in custom validation where no error message or styles would be shown

This commit is contained in:
Tobias 2023-09-13 14:11:31 +02:00
parent bb7fb1dc83
commit 3e3deda9dc

View File

@ -466,6 +466,11 @@ function sortTable() {
// validate a combatant row form by checking for all conditions, including regular HTML5 validation // validate a combatant row form by checking for all conditions, including regular HTML5 validation
function validateCombatant() { function validateCombatant() {
// do standard HTML5 form validation first
// (makes sure that name is not empty and that all other values are numbers within their individual ranges)
if ( ! $("#combatant-form").get(0).reportValidity() ) {
return false;
}
// get input elements // get input elements
let inputElements = { let inputElements = {
name: $("#combatant-modal-name").get(0), name: $("#combatant-modal-name").get(0),
@ -473,29 +478,20 @@ function validateCombatant() {
dice: $("#combatant-modal-dice").get(0), dice: $("#combatant-modal-dice").get(0),
rea: $("#combatant-modal-rea").get(0) rea: $("#combatant-modal-rea").get(0)
}; };
// do standard HTML5 form validation first
// (makes sure that name is not empty and that all other values are numbers within their individual ranges)
let valid = true;
Object.values(inputElements).forEach( input => {
if (!input.reportValidity()) { valid = false; }
})
if (!valid) { return false; }
// now for some custom validation; first we need to get the input values // now for some custom validation; first we need to get the input values
let ini = inputElements["ini"].value.trim(); let ini = inputElements["ini"].value.trim();
let dice = inputElements["dice"].value.trim(); let dice = inputElements["dice"].value.trim();
let rea = inputElements["rea"].value.trim(); let rea = inputElements["rea"].value.trim();
// invalidate if ini, dice and rea are all empty // invalidate if ini, dice and rea are all empty
if (ini == "" && (dice == "" || rea == "")) { if (ini == "" && (dice == "" || rea == "")) {
inputElements["ini"].setCustomValidity("Requiring values for ini dice and reaction, or initiative, or all three"); inputElements["ini"].setCustomValidity("Values required for either initiative, or dice and reaction, or all three");
inputElements["ini"].reportValidity(); inputElements["ini"].reportValidity();
inputElements["ini"].setCustomValidity("");
return false; return false;
} }
// invalidate if dice or rea is empty but not both // invalidate if dice or rea is empty but not both
if ((dice == "") != (rea == "")) { if ((dice == "") != (rea == "")) {
inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)"); inputElements["dice"].setCustomValidity("Values required for both dice and reaction, or none (in which case ini is required)");
inputElements["dice"].reportValidity(); inputElements["dice"].reportValidity();
inputElements["dice"].setCustomValidity("");
return false; return false;
} }
// ok then // ok then
@ -521,6 +517,10 @@ $(document).ready(function () {
$("#confirm-modal-remove-combatant-ok-button").on("click", () => { $("#confirm-modal-remove-combatant-ok-button").on("click", () => {
removeCombatant(); removeCombatant();
}); });
// add event handler to certain input elements that removes any custom validity message
$("#combatant-modal-dice #combatant-modal-rea #combatant-modal-ini").on("input", (event) => {
event.target.setCustomValidity("");
});
// add event listeners to damage sliders in combatant modal // add event listeners to damage sliders in combatant modal
$("#combatant-modal-stun").on("input change", () => { $("#combatant-modal-stun").on("input change", () => {
if ($("#combatant-modal-stun").val() == "10") { if ($("#combatant-modal-stun").val() == "10") {
@ -555,3 +555,5 @@ $(document).ready(function () {
}); });
addTestCombatant(); addTestCombatant();
}); });
module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni };