[Python] Trying to display error message in tagify but my js seems incorrect

I am using Tagify in my Python Flask SqlAlchemy project. I am trying to create a tag system using the tagify library, however I want it to behave a little different to the standard tagify.

I am trying to get tags to prepopulate and autocomplete when the user types a partial tag. This bit works ok. They then hit the comma and the js script autocompletes and the user can the start typing the next tag. At this point, they can select from the prepopulated list (the previous tag will have disappeared as it's already in use). However, I want users to be able to type and hit comma bypassing the prepopulate. I have a js which should catch the duplicate tag, causing it to be invalid and therefore return an error message.

It mostly works, but for some reason, whenever I type a duplicate tag, no error message is shown and it seems that the script automatically defaults to the "clear error" part of the "handle error" function.

I've tried using chatgpt to help figure out the issue but it just keeps yoyoing back and forth with the same answer that doesn't work. So it's time to ask you legends for help!

I am pasting the relevant code below, but I also have a codepen if that would help?

html

<input id="tags" placeholder="Add tags" />
<div id="tag-error" style="color: red; font-size: 0.875rem; min-height: 1.5rem; margin-top: 0.5rem;"></div>


CSS

#tag-error {
/* Just making sure the div is visible and spaced */
color: red;
font-size: 14px;
min-height: 24px;
margin-top: 5px;
}


JS

console.log("✅ Tagify script loaded");

const input = document.querySelector('#tags');
const tagify = new Tagify(input, {
maxTags: 5,
enforceWhitelist: false,
dropdown: {
enabled: 1,
fuzzySearch: true,
position: 'auto',
highlightFirst: true
}
});

let wasDuplicate = false;

tagify.on('beforeAddTag', function(e) {
const newTag = e.detail.data.value.toLowerCase();
const existingTags = tagify.value.map(tag => tag.value.toLowerCase());

if (existingTags.includes(newTag)) {
e.preventDefault();
wasDuplicate = true;
console.log("❌ Duplicate tag blocked:", newTag);
showError(`The tag "${newTag}" has already been added.`);
} else {
wasDuplicate = false;
console.log("✅ Unique tag allowed:", newTag);
clearError();
}
});

tagify.on('add', function(e) {
const addedTag = e.detail.data.value.toLowerCase();

if (wasDuplicate) {
console.log(" Skipping add handler due to duplicate:", addedTag);
wasDuplicate = false;
return;
}

console.log('✅ Valid tag added:', addedTag);
clearError();
});

tagify.on('invalid', function(e) {
const invalidTag = e.detail.data.value;
const reason = e.detail.message || "This tag is not valid";
console.log(" Invalid tag:", invalidTag, "Reason:", reason);
showError(reason);
});

// ✅ Split error functions for clarity
function showError(msg) {
const errorEl = document.getElementById('tag-error');
if (errorEl) {
errorEl.innerText = msg;
errorEl.style.display = 'block';
errorEl.style.color = 'red';
errorEl.style.fontSize = '0.875rem';
errorEl.style.minHeight = '1.5rem';
console.log("⚠️ Error displayed:", msg);
}
}

function clearError() {
const errorEl = document.getElementById('tag-error');
if (errorEl) {
errorEl.innerText = "";
errorEl.style.display = 'none';
console.log("✅ Error cleared");
}
}


Any help you can give, much appreciated.

Continue reading...