jQuery Validation doesn't work in AutoComplete Dropdown

Question

I am using autocomplete dropdown by following this below link,

https://www.jqueryscript.net/form/tags-autocomplete-dropdown.html

Following is my code,

<div class="pf-field">
     <input type="text" id="categories" name="categories" class="tags_input">
</div>

<script>
    $(function(){
    var data = [
        'History',
        'Civics',
        'Geogpraphy',
        'Science',
        'Economics',
        'Arts',
        'Chemistry',
        'Mathematics',
        'Language',
        'Computer',
    ];

    $(".tags_input").tagComplete({

                keylimit: 1,
                hide: false,
                autocomplete: {
                    data: data
                }
        });
});
</script>

But jQuery Validation is not working on it's input field.

$(function(){
    var $profile = $('#profile');
    if($profile.length){
        $profile.validate({
            errorElement: 'span',
            rules:{
                categories:{
                    required: true
                }

            },
            messages:{
                categories:{
                    required:'Categories are mandatory!'
                }
            }
        })
    }
})

However if I remove class="tags_input" from input field then it starts working..

Can anyone help me out ?