Hi

The issue is related to the DOM structure of Toggle Password fields and how FormValidation handles error message placement. Here's the specific solution:

The Toggle Password component in Metronic Tailwind has a specific DOM structure:

You need to customize the FormValidation error message placement for Toggle Password fields. Here's the solution:

// Initialize FormValidation with custom error handling for Toggle Password
const fv = FormValidation.formValidation(form, {
    fields: {
        password: {
            validators: {
                notEmpty: {
                    message: 'Password is required'
                },
                stringLength: {
                    min: 8,
                    message: 'Password must be at least 8 characters long'
                }
            }
        }
    },
    plugins: {
        trigger: new FormValidation.plugins.Trigger(),
        submitButton: new FormValidation.plugins.SubmitButton(),
        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
        icon: new FormValidation.plugins.Icon({
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        })
    }
});

// Custom error handling for Toggle Password fields
fv.on('core.field.invalid', function(e) {
    const element = e.element;
    const message = e.result.message;

    // Check if this is a Toggle Password field
    const togglePasswordContainer = element.closest('[data-kt-toggle-password="true"]');
    
    if (togglePasswordContainer) {
        // Remove existing error message
        const existingError = togglePasswordContainer.querySelector('.fv-error-message');
        if (existingError) {
            existingError.remove();
        }

        // Add error styling to the container
        togglePasswordContainer.classList.remove('border-green-500', 'focus:border-green-500', 'focus:ring-green-500');
        togglePasswordContainer.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');

        // Create error message element
        const errorElement = document.createElement('div');
        errorElement.className = 'fv-error-message text-red-600 text-sm mt-1 flex items-center';
        errorElement.innerHTML = `
            
            ${message}
        `;

        // Insert error message after the Toggle Password container
        togglePasswordContainer.parentNode.insertBefore(errorElement, togglePasswordContainer.nextSibling);
    } else {
        // Standard error handling for regular fields
        element.classList.remove('border-green-500', 'focus:border-green-500', 'focus:ring-green-500');
        element.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');

        const existingError = element.parentNode.querySelector('.fv-error-message');
        if (existingError) {
            existingError.remove();
        }

        const errorElement = document.createElement('div');
        errorElement.className = 'fv-error-message text-red-600 text-sm mt-1 flex items-center';
        errorElement.innerHTML = `
            
            ${message}
        `;
        element.parentNode.appendChild(errorElement);
    }
});

// Handle valid fields
fv.on('core.field.valid', function(e) {
    const element = e.element;
    const togglePasswordContainer = element.closest('[data-kt-toggle-password="true"]');
    
    if (togglePasswordContainer) {
        // Remove error styling from container
        togglePasswordContainer.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
        togglePasswordContainer.classList.add('border-green-500', 'focus:border-green-500', 'focus:ring-green-500');

        // Remove error message
        const errorElement = togglePasswordContainer.parentNode.querySelector('.fv-error-message');
        if (errorElement) {
            errorElement.remove();
        }
    } else {
        // Standard valid field handling
        element.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
        element.classList.add('border-green-500', 'focus:border-green-500', 'focus:ring-green-500');

        const errorElement = element.parentNode.querySelector('.fv-error-message');
        if (errorElement) {
            errorElement.remove();
        }
    }
});

If this solution doesn't resolve your issue, please share your specific HTML structure and JavaScript code so I can provide a better solution.