This code standardizes front-end error error messages during input validation by providing a utility function that assigns Bootstrap error classes to Knockout observables based on an optional validation function and a custom error message.
const assignErrorClass = (viewModelAttribute, inputField, validator = true, message =
"The following field is required") => {
if (viewModelAttribute === undefined) {
badInput(inputField, message);
$(inputField).addClass("is-invalid");
return false;
} else if (!validator) {
badInput(inputField, message);
$(inputField).addClass("is-invalid");
return false;
} else {
goodInput(inputField);
return true;
}
};
const goodInput = (element) => {
$(element).removeClass("is-invalid");
$(`${element}-invalid`).css("visibility", "hidden");
};
const badInput = (id, message) => {
$(id).addClass("is-invalid");
$(`${id}-invalid`).css("visibility", "visible");
$(`${id}-invalid`).text(message);
};
This sample of code, similar to the Closest Date Algorithm, makes use of ES6+ features. In the
goodInput and
badInput functions I use JQuery to dynamically add and remove error CSS classes. This adheres to software engineering
principles by preventing code duplication throughout the file, since every input needs it during registration.
Additionally, this adheres to the principles of developing good user interfaces by giving the user feedback
as they interact with the application that is consistent both visually and structurally. The error message
are displayed in a pink/red tone to indicate danger or error to the user. This function works in any input
validation scenario because the validator and message parameters have default values. This means that even
if you have input that requires no validation besides making sure it isn't empty, it can still be used.