Is there a way to display an alert message when user reached maxTags

[mhmdsohail]

Is there any way to display an alert message when a user tries to select more than maxTags.
Below code is working fine and its accepting maximum 10 values. When a user tries to enter more values it's not accepting and the user doesn't know that the maximum is 10 languages. There is no validation to display. But I would like to display an alert message saying "You already selected maximum 10 languages". Is there a way to display an alert message when a user tries to select more than maxTags?

var languages = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name")
    , queryTokenizer: Bloodhound.tokenizers.whitespace
    , prefetch: "./assets/languages.json"
});

languages.initialize(), 
$("#inputtags").tagsinput({
    maxTags: 10
    , freeInput: !1
    , typeaheadjs: {
        name: "id"
        , displayKey: "name"
        , valueKey: "name"
        , source: languages.ttAdapter()
    }
});

[Jan]

Hi,

a possibility shoulb be to check if the .bootstrap-tagsinputis changed.

function counttags(maxTags){
    var count = 0;
    
    $(document).on('DOMNodeInserted ', '.bootstrap-tagsinput', function() {
        count++;

        if(count >= maxTags){
            alert('Your maximum tag quantitiy is reached!')
        }
    });

    $(document).on('DOMNodeRemoved', '.bootstrap-tagsinput', function() {
        count--;
    });
}

var maxTags = 10;

var languages = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name")
    , queryTokenizer: Bloodhound.tokenizers.whitespace
    , prefetch: "./assets/languages.json"
});

languages.initialize(), 
$("#inputtags").tagsinput({
    maxTags: 10
    , freeInput: !1
    , typeaheadjs: {
        name: "id"
        , displayKey: "name"
        , valueKey: "name"
        , source: languages.ttAdapter()
    }
});

counttags(maxTags);
```

This is only an idea. The function will count everything and not only the spans. This means after three or four entries you will reach the 10 elements.

I hope it will help you to come to an function solution.

Cheers

[mhmdsohail]

Thanks @janstieler
Temporary I did another solution. Using click function I count the length of the input tags and if it reached the maxTags then it displays an alert. But I think your solution is the best one.

Thanks man... :)

$(".tt-dataset-id").click(function(){ 
    var numItems = $('.tag').length -1;
    //console.log(numItems);
    if(numItems>=10){
       alert('Maximum 10 languages are allowed')
    }
});