depot_django/static/js/container_validation.js

function validateContainerNumber(input) {
    const containerNumber = input.value.trim();
    const feedbackElement = input.nextElementSibling;

    if (!containerNumber) {
        input.classList.remove('invalid-container', 'incomplete-container');
        if (feedbackElement) feedbackElement.remove();
        return;
    }

    if (containerNumber.length > 0 && containerNumber.length < 11) {
        input.classList.remove('invalid-container');
        input.classList.add('incomplete-container');
        if (feedbackElement) feedbackElement.remove();
        return;
    }

    fetch(`${validateContainerUrl}${containerNumber}/`)
        .then(response => response.json())
        .then(data => {
            input.classList.remove('incomplete-container');
            if (!data.valid) {
                input.classList.add('invalid-container');
                if (!feedbackElement) {
                    const feedback = document.createElement('div');
                    feedback.className = 'validation-feedback';
                    feedback.textContent = 'Invalid container number';
                    input.parentNode.insertBefore(feedback, input.nextSibling);
                }
            } else {
                input.classList.remove('invalid-container');
                if (feedbackElement) feedbackElement.remove();
            }
        });
}